From 9e0c10cf01c53119d3a1031b0f9b190570927a4d Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Thu, 4 Apr 2024 00:56:22 +0700 Subject: [PATCH 1/9] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=94?= =?UTF-8?q?=E0=B8=B5=E0=B8=9A=E0=B8=B1=E0=B8=81=E0=B9=83=E0=B8=99=20Browse?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-debugging-chrome/article.md | 194 ++---------------- 1 file changed, 21 insertions(+), 173 deletions(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 509cbd972..c4a8ab0ff 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,196 +1,44 @@ -# การดีบั๊กในเบราว์เซอร์ +# การดีบักใน Browser -ก่อนที่เราจะเขียนโค้ดที่ซับซ้อนมากขึ้น มาคุยกันเรื่องการดีบั๊กกันก่อน +ก่อนที่เราจะเขียนโค้ดที่ซับซ้อนกว่านี้ มาคุยกันเรื่องการดีบักกันสักหน่อย -[การดีบั๊ก](https://en.wikipedia.org/wiki/Debugging) คือกระบวนการค้นหาและแก้ไขข้อผิดพลาดในสคริปต์ เบราว์เซอร์สมัยใหม่ทั้งหมดและสภาพแวดล้อมส่วนใหญ่รองรับเครื่องมือดีบั๊ก -- UI พิเศษในเครื่องมือนักพัฒนาที่ทำให้การดีบั๊กง่ายขึ้นมาก นอกจากนี้ยังอนุญาตให้ติดตามโค้ดทีละขั้นตอนเพื่อดูว่ากำลังเกิดอะไรขึ้นอย่างแน่ชัด +[Debugging](https://en.wikipedia.org/wiki/Debugging) คือกระบวนการค้นหาและแก้ไขข้อผิดพลาดภายในสคริปต์ เบราว์เซอร์สมัยใหม่ทั้งหมดและสภาพแวดล้อมส่วนใหญ่รองรับเครื่องมือสำหรับดีบัก -- พวก UI พิเศษในเครื่องมือนักพัฒนาที่ช่วยให้การดีบักง่ายขึ้นมาก นอกจากนี้ยังช่วยให้สามารถติดตามการทำงานของโค้ดได้ทีละขั้นตอน เพื่อดูว่าเกิดอะไรขึ้นกันแน่ -เราจะใช้ Chrome ที่นี่ เพราะมันมีฟีเจอร์เพียงพอ เบราว์เซอร์อื่นๆ ส่วนใหญ่มีขั้นตอนที่คล้ายกัน +เราจะใช้ Chrome ที่นี่เพราะมันมีฟีเจอร์ที่เพียงพอ ส่วนเบราว์เซอร์อื่นๆ ส่วนใหญ่ก็มีขั้นตอนคล้ายๆ กัน -## แผงควบคุม "Sources" +## แผง "Sources" -Chrome ของคุณอาจดูแตกต่างไปเล็กน้อย แต่ก็ยังควรจะเห็นได้ชัดว่ามีอะไรอยู่ในนั้น +Chrome เวอร์ชันที่คุณใช้อาจมีหน้าตาแตกต่างกันไปเล็กน้อย แต่ก็น่าจะเห็นได้ชัดเจนว่ามีอะไรอยู่ที่นั่นบ้าง -- เปิด [หน้าตัวอย่าง](debugging/index.html) ใน Chrome +- เปิด[หน้าตัวอย่าง](debugging/index.html) ใน Chrome - เปิดเครื่องมือนักพัฒนาด้วย `key:F12` (Mac: `key:Cmd+Opt+I`) -- เลือกแผงควบคุม `Sources` +- เลือกแผง `Sources` -นี่คือสิ่งที่คุณควรเห็นหากคุณทำเป็นครั้งแรก: +นี่คือสิ่งที่คุณควรเห็น ถ้าเป็นครั้งแรกที่ทำ: ![](chrome-open-sources.svg) -ปุ่ม toggler จะเปิดแท็บที่มีไฟล์ต่างๆ +ปุ่มสลับ จะเปิดแท็บที่มีไฟล์ต่างๆ -เราลองคลิกมันและเลือก `hello.js` ในมุมมองแบบ tree นี่คือสิ่งที่ควรจะปรากฏขึ้น: +ลองคลิกที่มันแล้วเลือก `hello.js` ในมุมมองแบบต้นไม้ นี่คือสิ่งที่น่าจะปรากฏขึ้น: ![](chrome-tabs.svg) -แผงควบคุม Sources มี 3 ส่วน: +แผง Sources ประกอบด้วย 3 ส่วน: -1. บานหน้าต่าง **File Navigator** จะแสดงไฟล์ HTML, JavaScript, CSS และไฟล์อื่นๆ รวมถึงรูปภาพที่แนบมากับหน้าเว็บ ส่วนขยายของ Chrome อาจปรากฏที่นี่ด้วย -2. บานหน้าต่าง **Code Editor** จะแสดงโค้ดต้นฉบับ -3. บานหน้าต่าง **JavaScript Debugging** ใช้สำหรับดีบั๊ก เราจะสำรวจมันเร็วๆ นี้ +1. บานหน้าต่าง **File Navigator** จะแสดงรายการไฟล์ HTML, JavaScript, CSS และอื่นๆ รวมถึงรูปภาพที่แนบมากับหน้าเว็บด้วย ส่วนขยายของ Chrome ก็อาจปรากฏที่นี่เช่นกัน +2. บานหน้าต่าง **Code Editor** จะแสดงซอร์สโค้ด +3. บานหน้าต่าง **JavaScript Debugging** ใช้สำหรับดีบัก เราจะมาดูมันกันในอีกสักครู่ -ตอนนี้คุณสามารถคลิกที่ปุ่ม toggler อีกครั้งเพื่อซ่อนรายการทรัพยากรและเว้นช่องให้โค้ดบ้าง +ตอนนี้คุณสามารถคลิกที่ปุ่มสลับ อีกครั้งเพื่อซ่อนรายการทรัพยากรและเพิ่มพื้นที่ให้กับส่วนแสดงโค้ด -## คอนโซล +## Console -ถ้าเรากด `key:Esc` คอนโซลจะเปิดขึ้นด้านล่าง เราสามารถพิมพ์คำสั่งลงไปและกด `key:Enter` เพื่อรันคำสั่ง +หากเรากด `key:Esc` คอนโซลจะเปิดขึ้นมาด้านล่าง เราสามารถพิมพ์คำสั่งลงไปที่นั่นแล้วกด `key:Enter` เพื่อให้มันทำงาน -หลังจากประโยคคำสั่งรัน ผลลัพธ์จะแสดงอยู่ข้างล่าง +หลังจากคำสั่งถูกประมวลผลแล้ว ผลลัพธ์ก็จะแสดงอยู่ด้านล่าง -ตัวอย่างเช่น `1+2` จะได้ผลลัพธ์เป็น `3` ในขณะที่การเรียกฟังก์ชัน `hello("debugger")` จะไม่คืนค่าอะไร ดังนั้นผลลัพธ์จะเป็น `undefined`: +ตัวอย่างเช่น ในที่นี้ `1+2` ให้ผลลัพธ์เป็น `3` ในขณะที่การเรียก function `hello("debugger")` ไม่ได้ส่งค่าใดๆ กลับมา ดังนั้นผลลัพธ์ที่ได้คือ `undefined`: ![](chrome-sources-console.svg) - -## Breakpoints - -มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ[หน้าตัวอย่าง](debugging/index.html) ใน `hello.js` ให้คลิกที่หมายเลขบรรทัด `4` ใช่ คลิกบนตัวเลข `4` เลย ไม่ใช่บนโค้ด - -ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว โปรดคลิกที่หมายเลขบรรทัด `8` ด้วย - -มันควรจะดูเหมือนแบบนี้ (สีน้ำเงินคือตรงที่คุณควรคลิก): - -![](chrome-sources-breakpoint.svg) - -*Breakpoint* คือจุดในโค้ดที่ debugger จะหยุดการทำงานของ JavaScript โดยอัตโนมัติ - -ในขณะที่โค้ดหยุดทำงาน เราสามารถตรวจสอบตัวแปรปัจจุบัน รันคำสั่งในคอนโซล ฯลฯ หรือพูดอีกอย่างคือ เราสามารถดีบั๊กได้ - -เราสามารถหารายการ breakpoint ได้ในแผงควบคุมด้านขวาเสมอ นั่นมีประโยชน์เมื่อเรามี breakpoint หลายจุดในหลายไฟล์ มันช่วยให้เรา: -- กระโดดไปยัง breakpoint ในโค้ดได้อย่างรวดเร็ว (โดยคลิกบน breakpoint ในแผงควบคุมด้านขวา) -- ปิดการใช้งาน breakpoint ชั่วคราวโดยยกเลิกการทำเครื่องหมาย -- ลบ breakpoint โดยคลิกขวาแล้วเลือก Remove -- ...และอื่นๆ - -```smart header="Conditional breakpoints" -การคลิก*ขวา* ที่หมายเลขบรรทัดช่วยให้คุณสร้าง *conditional* breakpoint ได้ มันจะทำงานก็ต่อเมื่อนิพจน์ที่คุณกำหนดเป็น truthy เท่านั้น - -นั่นมีประโยชน์เมื่อเราต้องการหยุดโค้ดเฉพาะสำหรับค่าตัวแปรบางค่าหรือสำหรับพารามิเตอร์ของฟังก์ชันบางอย่าง -``` - -## คำสั่ง "debugger" - -เราสามารถหยุดโค้ดได้โดยใช้คำสั่ง `debugger` ในโค้ดได้ด้วย แบบนี้: - -```js -function hello(name) { - let phrase = `Hello, ${name}!`; - -*!* - debugger; // <-- debugger จะหยุดที่นี่ -*/!* - - say(phrase); -} -``` - -คำสั่งดังกล่าวจะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนาถูกเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะไม่สนใจมัน - -## หยุดและดูรอบๆ - -ในตัวอย่างของเรา `hello()` ถูกเรียกระหว่างการโหลดหน้าเว็บ ดังนั้นวิธีที่ง่ายที่สุดในการเปิดใช้งาน debugger (หลังจากที่เราตั้ง breakpoint แล้ว) คือรีโหลดหน้าเว็บ ดังนั้นให้กด `key:F5` (Windows, Linux) หรือ `key:Cmd+R` (Mac) - -เนื่องจากตั้ง breakpoint ไว้แล้ว การทำงานจะหยุดที่บรรทัดที่ 4: - -![](chrome-sources-debugger-pause.svg) - -โปรดเปิดเมนูแบบเลื่อนลงที่มีข้อมูลทางด้านขวา (ที่มีลูกศร) มันจะช่วยให้คุณตรวจสอบสถานะโค้ดปัจจุบัน: - -1. **`Watch` -- แสดงค่าปัจจุบันสำหรับนิพจน์ใดๆ** - - คุณสามารถคลิกเครื่องหมายบวก `+` และใส่นิพจน์ได้ debugger จะแสดงค่าของนิพจน์นั้นโดยคำนวณใหม่โดยอัตโนมัติระหว่างการทำงาน - -2. **`Call Stack` -- แสดงลำดับการเรียกซ้อนกัน** - - ในขณะนี้ debugger อยู่ในการเรียกฟังก์ชัน `hello()` ซึ่งถูกเรียกโดยสคริปต์ใน `index.html` (ไม่มีฟังก์ชันที่นั่น ดังนั้นจึงเรียกว่า "anonymous") - - หากคุณคลิกที่รายการในสแตก (เช่น "anonymous") debugger จะกระโดดไปยังโค้ดที่สอดคล้องกัน และตัวแปรทั้งหมดก็สามารถตรวจสอบได้เช่นกัน - -3. **`Scope` -- ตัวแปรปัจจุบัน** - - `Local` แสดงตัวแปรในฟังก์ชันที่กำลังทำงาน คุณยังสามารถดูค่าของตัวแปรที่ถูกเน้นอยู่ข้างบนโค้ดได้ - - `Global` มีตัวแปรระดับโกลบอล (นอกฟังก์ชัน) - - ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะทำในเร็วๆ นี้ - -## ติดตามการทำงาน - -ตอนนี้ถึงเวลา *ติดตาม* การทำงานของสคริปต์แล้ว - -มีปุ่มสำหรับการติดตามอยู่ที่ด้านบนของแผงควบคุมด้านขวา มาใช้งานมันกัน - - -- "Resume": ดำเนินการต่อ, คีย์ลัด `key:F8` -: ดำเนินการทำงานต่อไป ถ้าไม่มี breakpoint เพิ่มเติม การทำงานก็จะดำเนินต่อไป และ debugger จะไม่มีการควบคุม - - นี่คือสิ่งที่เราจะเห็นหลังจากคลิกปุ่มนี้: - - ![](chrome-sources-debugger-trace-1.svg) - - การทำงานได้ดำเนินต่อไป ไปถึง breakpoint อื่นใน `say()` และหยุดการทำงานที่นั่น ดู "Call Stack" ที่ด้านขวา มันเพิ่มขึ้นอีกหนึ่งการเรียก ตอนนี้เราอยู่ใน `say()` แล้ว - - -- "Step": รันคำสั่งถัดไป, คีย์ลัด `key:F9` -: รันคำสั่งถัดไป ถ้าเราคลิกตอนนี้ `alert` จะแสดงออกมา - - คลิกตรงนี้อีกครั้งแล้วอีกครั้ง จะทำให้สามารถติดตามคำสั่งในสคริปต์ทีละคำสั่งได้ - - -- "Step over": รันคำสั่งถัดไป แต่*ไม่ต้องเข้าไปในฟังก์ชัน*, คีย์ลัด `key:F10` -: คล้ายกับปุ่ม "Step" ก่อนหน้า แต่จะมีพฤติกรรมแตกต่างกันหากคำสั่งถัดไปเป็นการเรียกฟังก์ชัน (ไม่ใช่ฟังก์ชันในตัว เช่น `alert` แต่เป็นฟังก์ชันที่เราสร้างเอง) - - หากเราเปรียบเทียบกัน คำสั่ง "Step" จะเข้าไปในฟังก์ชันที่ถูกเรียกซ้อนและหยุดการทำงานที่บรรทัดแรก ในขณะที่ "Step over" จะรันฟังก์ชันที่ถูกเรียกซ้อนโดยที่เราไม่เห็น โดยข้ามส่วนภายในฟังก์ชันไป - - การทำงานจะหยุดทันทีหลังจากการเรียกฟังก์ชันนั้น - - นั่นเป็นเรื่องดีถ้าเราไม่สนใจที่จะดูว่าเกิดอะไรขึ้นภายในการเรียกฟังก์ชัน - - -- "Step into", คีย์ลัด `key:F11` -: คล้ายกับ "Step" แต่จะมีพฤติกรรมแตกต่างกันในกรณีของการเรียกฟังก์ชันแบบ asynchronous ถ้าคุณเพิ่งเริ่มเรียน JavaScript คุณสามารถละเลยความแตกต่างได้ เพราะเรายังไม่มีการเรียกแบบ asynchronous - - ในอนาคต โปรดจำไว้ว่าคำสั่ง "Step" จะเพิกเฉยต่อ async action เช่น `setTimeout` (การเรียกฟังก์ชันที่ถูกกำหนดเวลา) ซึ่งจะรันทีหลัง ส่วน "Step into" จะเข้าไปในโค้ดของ async action และรอถ้าจำเป็น ดูรายละเอียดเพิ่มเติมได้ใน [คู่มือ DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) - - -- "Step out": ดำเนินการทำงานต่อจนถึงบรรทัดสุดท้ายของฟังก์ชันปัจจุบัน, คีย์ลัด `key:Shift+F11` -: ดำเนินการทำงานต่อและหยุดที่บรรทัดสุดท้ายของฟังก์ชันปัจจุบัน นั่นมีประโยชน์เมื่อเราเข้าไปในการเรียกฟังก์ชันซ้อนโดยไม่ตั้งใจโดยใช้ แต่เราไม่สนใจมัน และเราต้องการดำเนินต่อจนถึงจุดจบของมันให้เร็วที่สุด - - -- เปิด/ปิดใช้งาน breakpoint ทั้งหมด -: ปุ่มนี้ไม่ได้เลื่อนการทำงาน แค่เปิด/ปิดใช้งาน breakpoint ทั้งหมด - - -- เปิด/ปิดการหยุดอัตโนมัติเมื่อมีข้อผิดพลาด -: เมื่อเปิดใช้งาน หากเครื่องมือนักพัฒนาถูกเปิดอยู่ ข้อผิดพลาดระหว่างการรันสคริปต์จะหยุดโดยอัตโนมัติ แล้วเราสามารถวิเคราะห์ตัวแปรใน debugger เพื่อดูว่าอะไรผิดพลาด ดังนั้นหากสคริปต์ของเราล้มเหลวด้วยข้อผิดพลาด เราสามารถเปิด debugger เปิดใช้งานตัวเลือกนี้ และรีโหลดหน้าเว็บเพื่อดูว่ามันล้มเหลวที่ไหนและบริบทในขณะนั้นเป็นอย่างไร - -```smart header="ดำเนินไปที่นี่" -คลิกขวาบนบรรทัดโค้ด จะเปิดเมนูบริบทที่มีตัวเลือกที่ดีเรียกว่า "Continue to here" - -นั่นมีประโยชน์เมื่อเราต้องการเลื่อนหลายขั้นตอนไปยังบรรทัดนั้น แต่เรายังขี้เกียจตั้ง breakpoint -``` - -## Logging - -เพื่อแสดงผลบางอย่างไปที่คอนโซลจากโค้ดของเรา มีฟังก์ชัน `console.log` - -ตัวอย่างเช่น นี่จะแสดงค่าจาก `0` ถึง `4` ในคอนโซล: - -```js run -// เปิดคอนโซลเพื่อดู -for (let i = 0; i < 5; i++) { - console.log("ค่า,", i); -} -``` - -ผู้ใช้ทั่วไปจะไม่เห็นเอาต์พุตนี้ มันจะอยู่ในคอนโซล หากต้องการดูมัน ให้เปิดแผงควบคุม Console ของเครื่องมือนักพัฒนา หรือกด `key:Esc` ในขณะที่อยู่ในแผงควบคุมอื่น: นั่นจะเปิดคอนโซลที่ด้านล่าง - -ถ้าเรามีการล็อกในโค้ดของเรามากพอ เราจะสามารถเห็นว่ากำลังเกิดอะไรขึ้นจากบันทึก โดยไม่ต้องใช้ debugger - -## สรุป - -อย่างที่เราเห็น มีสามวิธีหลักในการหยุดสคริปต์: -1. Breakpoint -2. คำสั่ง `debugger` -3. ข้อผิดพลาด (ถ้าเครื่องมือนักพัฒนาถูกเปิด และปุ่ม เป็น "on") - -เมื่อหยุดการทำงาน เราสามารถดีบั๊ก: ตรวจสอบตัวแปรและติดตามโค้ดเพื่อดูว่าการทำงานผิดพลาดที่ไหน - -มีตัวเลือกอีกมากมายในเครื่องมือนักพัฒนามากกว่าที่กล่าวถึงที่นี่ คู่มือฉบับเต็มอยู่ที่ - -ข้อมูลจากบทนี้เพียงพอที่จะเริ่มการดีบั๊ก แต่ในภายหลัง โดยเฉพาะอย่างยิ่งหากคุณทำงานกับเบราว์เซอร์มาก โปรดไปที่นั่นและดูความสามารถขั้นสูงของเครื่องมือนักพัฒนา - -โอ้ และคุณยังสามารถคลิกที่ตำแหน่งต่างๆ ของเครื่องมือนักพัฒนาและดูเพียงว่ามีอะไรปรากฏขึ้น นั่นอาจเป็นเส้นทางที่เร็วที่สุดในการเรียนรู้เครื่องมือนักพัฒนา อย่าลืมคลิกขวาและเมนูบริบท! +``` \ No newline at end of file From eea9410f3291448b2fb481c8ba15345e508d224b Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Thu, 4 Apr 2024 01:07:14 +0700 Subject: [PATCH 2/9] Breakpoints --- .../01-debugging-chrome/article.md | 45 ++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index c4a8ab0ff..5aefb9f25 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -41,4 +41,47 @@ Chrome เวอร์ชันที่คุณใช้อาจมีหน ตัวอย่างเช่น ในที่นี้ `1+2` ให้ผลลัพธ์เป็น `3` ในขณะที่การเรียก function `hello("debugger")` ไม่ได้ส่งค่าใดๆ กลับมา ดังนั้นผลลัพธ์ที่ได้คือ `undefined`: ![](chrome-sources-console.svg) -``` \ No newline at end of file + +## Breakpoints + +มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ [example page](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด + +ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว กรุณาคลิกที่เลขบรรทัดที่ `8` ด้วย + +มันควรจะมีหน้าตาแบบนี้ (สีน้ำเงินคือตำแหน่งที่คุณควรคลิก): + +![](chrome-sources-breakpoint.svg) + +*breakpoint* คือจุดในโค้ดที่ตัวดีบักเกอร์จะหยุดการทำงานของ JavaScript โดยอัตโนมัติ + +ในขณะที่โค้ดหยุดอยู่ เราสามารถตรวจสอบค่าตัวแปรในปัจจุบัน รันคำสั่งในคอนโซล หรือทำอย่างอื่นได้ หรือพูดอีกอย่างคือ เราสามารถดีบักโค้ดตรงนั้นได้ + +เราสามารถดูรายการ breakpoint ทั้งหมดได้ที่แผงด้านขวาเสมอ ซึ่งมีประโยชน์มากเวลาเรามี breakpoint หลายจุดในหลายๆ ไฟล์ มันช่วยให้เรา: +- ข้ามไปยัง breakpoint ในโค้ดได้อย่างรวดเร็ว (โดยคลิกที่มันในแผงด้านขวา) +- ปิดการทำงานของ breakpoint ชั่วคราวโดยการเอาเครื่องหมายถูกออก +- ลบ breakpoint โดยคลิกขวาแล้วเลือก Remove +- ...และอื่นๆ + +```smart header="Conditional breakpoints" +การ *คลิกขวา* บนเลขบรรทัดจะช่วยให้สร้าง breakpoint *แบบมีเงื่อนไข* ได้ มันจะทำงานก็ต่อเมื่อนิพจน์ที่กำหนดไว้ตอนสร้าง (ซึ่งคุณต้องใส่เอง) มีค่าเป็นจริงเท่านั้น + +นี่เป็นประโยชน์มากเวลาที่เราอยากจะหยุดเฉพาะตอนที่ค่าตัวแปรบางตัว หรือพารามิเตอร์ของฟังก์ชันบางตัวมีค่าตามที่ระบุไว้เท่านั้น +``` + +## คำสั่ง "debugger" + +นอกจากนี้เรายังสามารถหยุดการทำงานของโค้ดได้โดยใช้คำสั่ง `debugger` ในโค้ดโดยตรง แบบนี้: + +```js +function hello(name) { + let phrase = `Hello, ${name}!`; + +*!* + debugger; // <-- ตัวดีบักเกอร์จะหยุดที่ตรงนี้ +*/!* + + say(phrase); +} +``` + +คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป \ No newline at end of file From 9c2d8db33f093a74a8df7947b80134f528ce8fe3 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Thu, 4 Apr 2024 01:07:46 +0700 Subject: [PATCH 3/9] Fix typo in debugging-chrome article --- 1-js/03-code-quality/01-debugging-chrome/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 5aefb9f25..a9b52555a 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -44,7 +44,7 @@ Chrome เวอร์ชันที่คุณใช้อาจมีหน ## Breakpoints -มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ [example page](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด +มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ[หน้าตัวอย่าง](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว กรุณาคลิกที่เลขบรรทัดที่ `8` ด้วย From e649ac732a096ace5334d4dd31f1bae9b743ae15 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Thu, 4 Apr 2024 23:55:31 +0700 Subject: [PATCH 4/9] Breakpoints --- .../01-debugging-chrome/article.md | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index a9b52555a..212b00760 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -84,4 +84,48 @@ function hello(name) { } ``` +คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป + +## Breakpoints + +มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ [example page](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด + +ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว กรุณาคลิกที่เลขบรรทัดที่ `8` ด้วย + +มันควรจะมีหน้าตาแบบนี้ (สีน้ำเงินคือตำแหน่งที่คุณควรคลิก): + +![](chrome-sources-breakpoint.svg) + +*breakpoint* คือจุดในโค้ดที่ตัวดีบักเกอร์จะหยุดการทำงานของ JavaScript โดยอัตโนมัติ + +ในขณะที่โค้ดหยุดอยู่ เราสามารถตรวจสอบค่าตัวแปรในปัจจุบัน รันคำสั่งในคอนโซล หรือทำอย่างอื่นได้ หรือพูดอีกอย่างคือ เราสามารถดีบักโค้ดตรงนั้นได้ + +เราสามารถดูรายการ breakpoint ทั้งหมดได้ที่แผงด้านขวาเสมอ ซึ่งมีประโยชน์มากเวลาเรามี breakpoint หลายจุดในหลายๆ ไฟล์ มันช่วยให้เรา: +- ข้ามไปยัง breakpoint ในโค้ดได้อย่างรวดเร็ว (โดยคลิกที่มันในแผงด้านขวา) +- ปิดการทำงานของ breakpoint ชั่วคราวโดยการเอาเครื่องหมายถูกออก +- ลบ breakpoint โดยคลิกขวาแล้วเลือก Remove +- ...และอื่นๆ + +```smart header="Conditional breakpoints" +การ *คลิกขวา* บนเลขบรรทัดจะช่วยให้สร้าง breakpoint *แบบมีเงื่อนไข* ได้ มันจะทำงานก็ต่อเมื่อนิพจน์ที่กำหนดไว้ตอนสร้าง (ซึ่งคุณต้องใส่เอง) มีค่าเป็นจริงเท่านั้น + +นี่เป็นประโยชน์มากเวลาที่เราอยากจะหยุดเฉพาะตอนที่ค่าตัวแปรบางตัว หรือพารามิเตอร์ของฟังก์ชันบางตัวมีค่าตามที่ระบุไว้เท่านั้น +``` + +## คำสั่ง "debugger" + +นอกจากนี้เรายังสามารถหยุดการทำงานของโค้ดได้โดยใช้คำสั่ง `debugger` ในโค้ดโดยตรง แบบนี้: + +```js +function hello(name) { + let phrase = `Hello, ${name}!`; + +*!* + debugger; // <-- ตัวดีบักเกอร์จะหยุดที่ตรงนี้ +*/!* + + say(phrase); +} +``` + คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป \ No newline at end of file From 3b80aa7ab83cd185dff80bbee4624fe4822cd450 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Fri, 5 Apr 2024 00:13:27 +0700 Subject: [PATCH 5/9] =?UTF-8?q?=E0=B8=AB=E0=B8=A2=E0=B8=B8=E0=B8=94?= =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B9=89=E0=B8=A7=E0=B8=AA=E0=B8=B3=E0=B8=A3?= =?UTF-8?q?=E0=B8=A7=E0=B8=88=E0=B8=94=E0=B8=B9=E0=B8=A3=E0=B8=AD=E0=B8=9A?= =?UTF-8?q?=E0=B9=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-debugging-chrome/article.md | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 212b00760..ebb4d0b4c 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -128,4 +128,31 @@ function hello(name) { } ``` -คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป \ No newline at end of file +คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป + +## หยุดแล้วสำรวจดูรอบๆ + +ในตัวอย่างของเรา `hello()` ถูกเรียกใช้ระหว่างการโหลดหน้าเว็บ ดังนั้นวิธีที่ง่ายที่สุดในการเปิดใช้งานตัวดีบักเกอร์ (หลังจากตั้ง breakpoint แล้ว) คือการโหลดหน้าเว็บใหม่ ดังนั้นมากดปุ่ม `key:F5` (Windows, Linux) หรือ `key:Cmd+R` (Mac) กัน + +เนื่องจากมีการตั้ง breakpoint ไว้ การทำงานของโปรแกรมจะหยุดที่บรรทัดที่ 4: + +![](chrome-sources-debugger-pause.svg) + +กรุณาเปิดดรอปดาวน์ที่แสดงข้อมูลด้านขวา (ที่มีลูกศรชี้อยู่) มันจะช่วยให้คุณสามารถตรวจสอบสถานะของโค้ดในปัจจุบันได้: + +1. **`Watch` -- แสดงค่าปัจจุบันของนิพจน์ต่างๆ** + + คุณสามารถคลิกที่เครื่องหมายบวก `+` แล้วใส่นิพจน์เข้าไป ตัวดีบักเกอร์จะแสดงค่าของนิพจน์นั้น โดยจะคำนวณใหม่โดยอัตโนมัติในระหว่างการประมวลผล + +2. **`Call Stack` -- แสดงลำดับการเรียกฟังก์ชันที่ซ้อนกัน** + + ในตอนนี้ตัวดีบักเกอร์กำลังอยู่ในการเรียกฟังก์ชัน `hello()` ซึ่งถูกเรียกโดยสคริปต์ใน `index.html` (ไม่มีฟังก์ชันที่นั่น จึงเรียกว่า "anonymous") + + ถ้าคุณคลิกที่รายการใน call stack (เช่น "anonymous") ตัวดีบักเกอร์จะข้ามไปยังโค้ดส่วนนั้น และคุณก็สามารถตรวจสอบค่าตัวแปรทั้งหมดที่นั่นได้เช่นกัน +3. **`Scope` -- ตัวแปรในขอบเขตปัจจุบัน** + + `Local` จะแสดงตัวแปรภายในในฟังก์ชัน คุณจะเห็นค่าของพวกมันถูกไฮไลต์อยู่เหนือโค้ดด้วย + + `Global` จะแสดงตัวแปรระดับโกลบอล (ที่อยู่นอกฟังก์ชันใดๆ) + + นอกจากนี้ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะได้เรียนรู้เร็วๆ นี้แหละ \ No newline at end of file From 6f6a3d98ef17560b54c700df39a86c5057d1ade1 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Fri, 5 Apr 2024 00:38:00 +0700 Subject: [PATCH 6/9] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95?= =?UTF-8?q?=E0=B8=B4=E0=B8=94=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=81=E0=B8=B2?= =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A1=E0=B8=A7=E0=B8=A5?= =?UTF-8?q?=E0=B8=9C=E0=B8=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-debugging-chrome/article.md | 51 ++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index ebb4d0b4c..38b99c3ca 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -155,4 +155,53 @@ function hello(name) { `Global` จะแสดงตัวแปรระดับโกลบอล (ที่อยู่นอกฟังก์ชันใดๆ) - นอกจากนี้ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะได้เรียนรู้เร็วๆ นี้แหละ \ No newline at end of file + นอกจากนี้ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะได้เรียนรู้เร็วๆ นี้แหละ + +## การติดตามการประมวลผล + +ตอนนี้ถึงเวลา *ติดตาม* การทำงานของสคริปต์แล้ว + +มีปุ่มสำหรับการติดตามอยู่ที่ด้านบนของแผงด้านขวา มาลองใช้กันเลย + + -- "Resume": ดำเนินการประมวลผลต่อ, ปุ่มลัด `key:F8` +: ดำเนินการประมวลผลโค้ดต่อไป ถ้าไม่มี breakpoint เพิ่มเติม การประมวลผลจะดำเนินต่อเรื่อยๆ และตัวดีบักเกอร์จะหยุดควบคุมการทำงาน + + นี่คือสิ่งที่เราจะเห็นหลังจากคลิกที่ปุ่มนี้: + + ![](chrome-sources-debugger-trace-1.svg) + + การประมวลผลได้ดำเนินต่อไปแล้ว ไปถึง breakpoint อีกจุดหนึ่งภายในฟังก์ชัน `say()` และหยุดอยู่ที่นั่น ลองดูที่ "Call Stack" ทางด้านขวา จะเห็นว่ามีการเรียกเพิ่มขึ้นมาอีกหนึ่งชั้น ตอนนี้เรากำลังอยู่ภายในฟังก์ชัน `say()` + + -- "Step": ดำเนินคำสั่งถัดไป, ปุ่มลัด `key:F9` +: ดำเนินการตามคำสั่งถัดไป ถ้าเราคลิกตอนนี้ จะมี `alert` ปรากฏขึ้น + + คลิกแบบนี้ซ้ำๆ จะทำให้ผ่านคำสั่งต่างๆ ในสคริปต์ไปทีละคำสั่ง + + -- "Step over": ดำเนินคำสั่งถัดไป แต่ *ไม่ต้องเข้าไปในฟังก์ชัน*, ปุ่มลัด `key:F10` +: คล้ายกับคำสั่ง "Step" ก่อนหน้า แต่จะทำงานแตกต่างกันถ้าคำสั่งถัดไปเป็นการเรียกฟังก์ชัน (ไม่ใช่ฟังก์ชันในตัว เช่น `alert` แต่เป็นฟังก์ชันที่เราสร้างเอง) + + ถ้าเปรียบเทียบกัน คำสั่ง "Step" จะเข้าไปในการเรียกฟังก์ชันซ้อน และหยุดการประมวลผลที่บรรทัดแรกของฟังก์ชันนั้น แต่ "Step over" จะประมวลผลการเรียกฟังก์ชันซ้อนโดยที่เราไม่เห็น ข้ามการทำงานภายในฟังก์ชันไป + + จากนั้นการประมวลผลจะหยุดทันทีหลังจบการเรียกฟังก์ชันนั้น + + นี่จะมีประโยชน์ถ้าเราไม่สนใจที่จะดูว่ามีอะไรเกิดขึ้นภายในฟังก์ชันนั้นบ้าง + + -- "Step into", ปุ่มลัด `key:F11` +: คล้ายกับ "Step" แต่จะทำงานต่างกันกรณีการเรียกฟังก์ชันแบบอะซิงโครนัส ถ้าคุณเพิ่งเริ่มเรียน JavaScript คุณสามารถข้ามส่วนนี้ไปก่อนได้ เพราะเรายังไม่มีการเรียกแบบอะซิงโครนัส + + แค่จำไว้ว่าคำสั่ง "Step" จะข้ามการทำงานแบบ async เช่น `setTimeout` (การเรียกฟังก์ชันตามเวลาที่กำหนด) ที่จะประมวลผลภายหลัง ส่วน "Step into" จะเข้าไปในโค้ดส่วนนั้น รอจนกว่ามันจะเสร็จถ้าจำเป็น อ่านรายละเอียดเพิ่มเติมได้ใน [คู่มือ DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) + + -- "Step out": ดำเนินการประมวลผลต่อจนจบฟังก์ชันปัจจุบัน, ปุ่มลัด `key:Shift+F11` +: ดำเนินการประมวลผลโค้ดต่อไปจนถึงบรรทัดสุดท้ายของฟังก์ชันปัจจุบัน ใช้เมื่อเราเข้าไปในฟังก์ชันซ้อนโดยไม่ได้ตั้งใจโดยใช้ แต่ไม่ได้สนใจการทำงานในนั้น และอยากให้มันจบโดยเร็ว + + -- เปิด/ปิดใช้งาน breakpoint ทั้งหมด +: ปุ่มนี้ไม่ได้เลื่อนการประมวลผล แต่เป็นการเปิด/ปิด breakpoint ทั้งหมดพร้อมกัน + + -- เปิด/ปิดการหยุดอัตโนมัติเมื่อมีข้อผิดพลาด +: เมื่อเปิดใช้งาน หากเครื่องมือนักพัฒนากำลังเปิดอยู่ เวลามีข้อผิดพลาดเกิดขึ้นระหว่างการประมวลผลสคริปต์ มันจะหยุดทำงานทันที ซึ่งเราสามารถใช้ตรวจสอบค่าตัวแปรต่างๆ ในตัวดีบักเกอร์เพื่อดูว่ามีอะไรผิดปกติ ดังนั้นถ้าสคริปต์ของเราหยุดการทำงานเพราะข้อผิดพลาด เราสามารถเปิดตัวดีบักเกอร์ เปิดใช้งานตัวเลือกนี้ แล้วโหลดหน้าเว็บใหม่เพื่อดูว่ามันหยุดที่ตรงไหน และสถานะตอนนั้นเป็นยังไง + +```smart header="Continue to here" +คลิกขวาที่บรรทัดโค้ดจะเปิดเมนูบริบท ซึ่งมีตัวเลือกที่ดีมากอย่าง "Continue to here" + +นี่จะมีประโยชน์เมื่อเราอยากข้ามไปหลายขั้นตอนจนถึงบรรทัดนั้น แต่ขี้เกียจตั้ง breakpoint +``` \ No newline at end of file From ecc9fef414bde16930090a360cdff46eb6ff55d8 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Fri, 5 Apr 2024 00:41:21 +0700 Subject: [PATCH 7/9] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80?= =?UTF-8?q?=E0=B8=81=E0=B9=87=E0=B8=9A=E0=B8=A5=E0=B9=87=E0=B8=AD=E0=B8=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-debugging-chrome/article.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 38b99c3ca..ad0b4c94b 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -204,4 +204,21 @@ function hello(name) { คลิกขวาที่บรรทัดโค้ดจะเปิดเมนูบริบท ซึ่งมีตัวเลือกที่ดีมากอย่าง "Continue to here" นี่จะมีประโยชน์เมื่อเราอยากข้ามไปหลายขั้นตอนจนถึงบรรทัดนั้น แต่ขี้เกียจตั้ง breakpoint -``` \ No newline at end of file +``` + +## การเก็บล็อก + +เพื่อแสดงผลบางอย่างไปยังคอนโซลจากโค้ดของเรา เราสามารถใช้ฟังก์ชัน `console.log` + +ตัวอย่างเช่น โค้ดนี้จะแสดงค่าตั้งแต่ `0` ถึง `4` ไปที่คอนโซล: + +```js run +// เปิดคอนโซลเพื่อดูผลลัพธ์ +for (let i = 0; i < 5; i++) { + console.log("value,", i); +} +``` + +ผู้ใช้ทั่วไปจะไม่เห็นผลลัพธ์นี้ เพราะมันอยู่ในคอนโซล หากต้องการดู ให้เปิดแผง Console ในเครื่องมือสำหรับนักพัฒนา หรือกด `key:Esc` ในขณะที่อยู่ในแผงอื่น ซึ่งจะเปิดคอนโซลขึ้นมาที่ด้านล่างของหน้าจอ + +ถ้าเรามีการล็อกในโค้ดมากพอ เราจะสามารถติดตามได้ว่ากำลังเกิดอะไรขึ้นจากข้อมูลที่ถูกบันทึกไว้ โดยไม่จำเป็นต้องใช้ตัวดีบักเกอร์ \ No newline at end of file From ec417035b607978ca862dfd458fa1ddb879d9b8d Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Fri, 5 Apr 2024 00:44:26 +0700 Subject: [PATCH 8/9] =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=B8=E0=B8=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-debugging-chrome/article.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index ad0b4c94b..c05080c3a 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -221,4 +221,21 @@ for (let i = 0; i < 5; i++) { ผู้ใช้ทั่วไปจะไม่เห็นผลลัพธ์นี้ เพราะมันอยู่ในคอนโซล หากต้องการดู ให้เปิดแผง Console ในเครื่องมือสำหรับนักพัฒนา หรือกด `key:Esc` ในขณะที่อยู่ในแผงอื่น ซึ่งจะเปิดคอนโซลขึ้นมาที่ด้านล่างของหน้าจอ -ถ้าเรามีการล็อกในโค้ดมากพอ เราจะสามารถติดตามได้ว่ากำลังเกิดอะไรขึ้นจากข้อมูลที่ถูกบันทึกไว้ โดยไม่จำเป็นต้องใช้ตัวดีบักเกอร์ \ No newline at end of file +ถ้าเรามีการล็อกในโค้ดมากพอ เราจะสามารถติดตามได้ว่ากำลังเกิดอะไรขึ้นจากข้อมูลที่ถูกบันทึกไว้ โดยไม่จำเป็นต้องใช้ตัวดีบักเกอร์ + +ข้อความสรุปนี้อธิบายวิธีการหยุดการทำงานของสคริปต์และการใช้งานเครื่องมือนักพัฒนาได้ดีมากครับ ภาษาที่ใช้ก็ชัดเจนเข้าใจง่าย + +## สรุป + +อย่างที่เราเห็น มีสามวิธีหลักในการหยุดการทำงานของสคริปต์: +1. จุดหยุด (breakpoint) +2. คำสั่ง `debugger` +3. ข้อผิดพลาด (ถ้าเครื่องมือนักพัฒนากำลังเปิดอยู่และปุ่ม อยู่ในสถานะ "เปิด") + +เมื่อหยุดแล้ว เราสามารถดีบักได้โดยการตรวจสอบค่าตัวแปรและติดตามการทำงานของโค้ด เพื่อดูว่าการประมวลผลผิดพลาดตรงจุดไหน + +เครื่องมือนักพัฒนามีตัวเลือกอีกมากมายนอกเหนือจากที่กล่าวถึงที่นี่ สามารถอ่านคู่มือฉบับเต็มได้ที่ + +ข้อมูลในบทความนี้เพียงพอสำหรับการเริ่มต้นดีบัก แต่ในภายหลัง โดยเฉพาะถ้าคุณต้องทำงานกับเบราว์เซอร์บ่อยๆ แนะนำให้ไปศึกษาเพิ่มเติมเกี่ยวกับความสามารถขั้นสูงของเครื่องมือนักพัฒนา + +อ้อ แล้วก็คุณสามารถคลิกที่ส่วนต่างๆ ของเครื่องมือนักพัฒนา แล้วสังเกตดูว่ามีอะไรปรากฏขึ้นบ้าง นี่น่าจะเป็นวิธีที่เร็วที่สุดในการเรียนรู้การใช้งานเครื่องมือนักพัฒนา และอย่าลืมลองคลิกขวาเพื่อเปิดเมนูบริบทดูด้วยล่ะ! \ No newline at end of file From 23c66c3953ed28615b6113429885ae2de2113ae6 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Fri, 5 Apr 2024 00:45:35 +0700 Subject: [PATCH 9/9] Fix breakpoint translation in article.md --- 1-js/03-code-quality/01-debugging-chrome/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index c05080c3a..d9beeb91e 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -86,7 +86,7 @@ function hello(name) { คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป -## Breakpoints +## จุดหยุด (Breakpoints) มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ [example page](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด