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..d9beeb91e 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,241 @@ -# การดีบั๊กในเบราว์เซอร์ +# การดีบักใน 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` เลย ไม่ใช่บนโค้ด +มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ[หน้าตัวอย่าง](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด -ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว โปรดคลิกที่หมายเลขบรรทัด `8` ด้วย +ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว กรุณาคลิกที่เลขบรรทัดที่ `8` ด้วย -มันควรจะดูเหมือนแบบนี้ (สีน้ำเงินคือตรงที่คุณควรคลิก): +มันควรจะมีหน้าตาแบบนี้ (สีน้ำเงินคือตำแหน่งที่คุณควรคลิก): ![](chrome-sources-breakpoint.svg) -*Breakpoint* คือจุดในโค้ดที่ debugger จะหยุดการทำงานของ JavaScript โดยอัตโนมัติ +*breakpoint* คือจุดในโค้ดที่ตัวดีบักเกอร์จะหยุดการทำงานของ JavaScript โดยอัตโนมัติ -ในขณะที่โค้ดหยุดทำงาน เราสามารถตรวจสอบตัวแปรปัจจุบัน รันคำสั่งในคอนโซล ฯลฯ หรือพูดอีกอย่างคือ เราสามารถดีบั๊กได้ +ในขณะที่โค้ดหยุดอยู่ เราสามารถตรวจสอบค่าตัวแปรในปัจจุบัน รันคำสั่งในคอนโซล หรือทำอย่างอื่นได้ หรือพูดอีกอย่างคือ เราสามารถดีบักโค้ดตรงนั้นได้ -เราสามารถหารายการ breakpoint ได้ในแผงควบคุมด้านขวาเสมอ นั่นมีประโยชน์เมื่อเรามี breakpoint หลายจุดในหลายไฟล์ มันช่วยให้เรา: -- กระโดดไปยัง breakpoint ในโค้ดได้อย่างรวดเร็ว (โดยคลิกบน breakpoint ในแผงควบคุมด้านขวา) -- ปิดการใช้งาน breakpoint ชั่วคราวโดยยกเลิกการทำเครื่องหมาย +เราสามารถดูรายการ breakpoint ทั้งหมดได้ที่แผงด้านขวาเสมอ ซึ่งมีประโยชน์มากเวลาเรามี breakpoint หลายจุดในหลายๆ ไฟล์ มันช่วยให้เรา: +- ข้ามไปยัง breakpoint ในโค้ดได้อย่างรวดเร็ว (โดยคลิกที่มันในแผงด้านขวา) +- ปิดการทำงานของ breakpoint ชั่วคราวโดยการเอาเครื่องหมายถูกออก - ลบ breakpoint โดยคลิกขวาแล้วเลือก Remove - ...และอื่นๆ ```smart header="Conditional breakpoints" -การคลิก*ขวา* ที่หมายเลขบรรทัดช่วยให้คุณสร้าง *conditional* breakpoint ได้ มันจะทำงานก็ต่อเมื่อนิพจน์ที่คุณกำหนดเป็น truthy เท่านั้น +การ *คลิกขวา* บนเลขบรรทัดจะช่วยให้สร้าง breakpoint *แบบมีเงื่อนไข* ได้ มันจะทำงานก็ต่อเมื่อนิพจน์ที่กำหนดไว้ตอนสร้าง (ซึ่งคุณต้องใส่เอง) มีค่าเป็นจริงเท่านั้น -นั่นมีประโยชน์เมื่อเราต้องการหยุดโค้ดเฉพาะสำหรับค่าตัวแปรบางค่าหรือสำหรับพารามิเตอร์ของฟังก์ชันบางอย่าง +นี่เป็นประโยชน์มากเวลาที่เราอยากจะหยุดเฉพาะตอนที่ค่าตัวแปรบางตัว หรือพารามิเตอร์ของฟังก์ชันบางตัวมีค่าตามที่ระบุไว้เท่านั้น ``` ## คำสั่ง "debugger" -เราสามารถหยุดโค้ดได้โดยใช้คำสั่ง `debugger` ในโค้ดได้ด้วย แบบนี้: +นอกจากนี้เรายังสามารถหยุดการทำงานของโค้ดได้โดยใช้คำสั่ง `debugger` ในโค้ดโดยตรง แบบนี้: ```js function hello(name) { let phrase = `Hello, ${name}!`; *!* - debugger; // <-- debugger จะหยุดที่นี่ + debugger; // <-- ตัวดีบักเกอร์จะหยุดที่ตรงนี้ */!* say(phrase); } ``` -คำสั่งดังกล่าวจะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนาถูกเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะไม่สนใจมัน +คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป -## หยุดและดูรอบๆ +## จุดหยุด (Breakpoints) -ในตัวอย่างของเรา `hello()` ถูกเรียกระหว่างการโหลดหน้าเว็บ ดังนั้นวิธีที่ง่ายที่สุดในการเปิดใช้งาน debugger (หลังจากที่เราตั้ง breakpoint แล้ว) คือรีโหลดหน้าเว็บ ดังนั้นให้กด `key:F5` (Windows, Linux) หรือ `key:Cmd+R` (Mac) +มาดูกันว่ามีอะไรเกิดขึ้นในโค้ดของ [example page](debugging/index.html) บ้าง ใน `hello.js` ให้คลิกที่เลขบรรทัดที่ `4` ใช่ คลิกที่ตัวเลข `4` เลย ไม่ใช่ที่โค้ด -เนื่องจากตั้ง breakpoint ไว้แล้ว การทำงานจะหยุดที่บรรทัดที่ 4: +ยินดีด้วย! คุณได้ตั้ง breakpoint แล้ว กรุณาคลิกที่เลขบรรทัดที่ `8` ด้วย -![](chrome-sources-debugger-pause.svg) +มันควรจะมีหน้าตาแบบนี้ (สีน้ำเงินคือตำแหน่งที่คุณควรคลิก): + +![](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); +} +``` + +คำสั่งลักษณะนี้จะทำงานก็ต่อเมื่อเครื่องมือนักพัฒนากำลังเปิดอยู่เท่านั้น ไม่เช่นนั้นเบราว์เซอร์จะข้ามมันไป + +## หยุดแล้วสำรวจดูรอบๆ -โปรดเปิดเมนูแบบเลื่อนลงที่มีข้อมูลทางด้านขวา (ที่มีลูกศร) มันจะช่วยให้คุณตรวจสอบสถานะโค้ดปัจจุบัน: +ในตัวอย่างของเรา `hello()` ถูกเรียกใช้ระหว่างการโหลดหน้าเว็บ ดังนั้นวิธีที่ง่ายที่สุดในการเปิดใช้งานตัวดีบักเกอร์ (หลังจากตั้ง breakpoint แล้ว) คือการโหลดหน้าเว็บใหม่ ดังนั้นมากดปุ่ม `key:F5` (Windows, Linux) หรือ `key:Cmd+R` (Mac) กัน -1. **`Watch` -- แสดงค่าปัจจุบันสำหรับนิพจน์ใดๆ** +เนื่องจากมีการตั้ง breakpoint ไว้ การทำงานของโปรแกรมจะหยุดที่บรรทัดที่ 4: - คุณสามารถคลิกเครื่องหมายบวก `+` และใส่นิพจน์ได้ debugger จะแสดงค่าของนิพจน์นั้นโดยคำนวณใหม่โดยอัตโนมัติระหว่างการทำงาน +![](chrome-sources-debugger-pause.svg) + +กรุณาเปิดดรอปดาวน์ที่แสดงข้อมูลด้านขวา (ที่มีลูกศรชี้อยู่) มันจะช่วยให้คุณสามารถตรวจสอบสถานะของโค้ดในปัจจุบันได้: -2. **`Call Stack` -- แสดงลำดับการเรียกซ้อนกัน** +1. **`Watch` -- แสดงค่าปัจจุบันของนิพจน์ต่างๆ** - ในขณะนี้ debugger อยู่ในการเรียกฟังก์ชัน `hello()` ซึ่งถูกเรียกโดยสคริปต์ใน `index.html` (ไม่มีฟังก์ชันที่นั่น ดังนั้นจึงเรียกว่า "anonymous") + คุณสามารถคลิกที่เครื่องหมายบวก `+` แล้วใส่นิพจน์เข้าไป ตัวดีบักเกอร์จะแสดงค่าของนิพจน์นั้น โดยจะคำนวณใหม่โดยอัตโนมัติในระหว่างการประมวลผล - หากคุณคลิกที่รายการในสแตก (เช่น "anonymous") debugger จะกระโดดไปยังโค้ดที่สอดคล้องกัน และตัวแปรทั้งหมดก็สามารถตรวจสอบได้เช่นกัน +2. **`Call Stack` -- แสดงลำดับการเรียกฟังก์ชันที่ซ้อนกัน** -3. **`Scope` -- ตัวแปรปัจจุบัน** + ในตอนนี้ตัวดีบักเกอร์กำลังอยู่ในการเรียกฟังก์ชัน `hello()` ซึ่งถูกเรียกโดยสคริปต์ใน `index.html` (ไม่มีฟังก์ชันที่นั่น จึงเรียกว่า "anonymous") - `Local` แสดงตัวแปรในฟังก์ชันที่กำลังทำงาน คุณยังสามารถดูค่าของตัวแปรที่ถูกเน้นอยู่ข้างบนโค้ดได้ + ถ้าคุณคลิกที่รายการใน call stack (เช่น "anonymous") ตัวดีบักเกอร์จะข้ามไปยังโค้ดส่วนนั้น และคุณก็สามารถตรวจสอบค่าตัวแปรทั้งหมดที่นั่นได้เช่นกัน +3. **`Scope` -- ตัวแปรในขอบเขตปัจจุบัน** - `Global` มีตัวแปรระดับโกลบอล (นอกฟังก์ชัน) + `Local` จะแสดงตัวแปรภายในในฟังก์ชัน คุณจะเห็นค่าของพวกมันถูกไฮไลต์อยู่เหนือโค้ดด้วย - ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะทำในเร็วๆ นี้ + `Global` จะแสดงตัวแปรระดับโกลบอล (ที่อยู่นอกฟังก์ชันใดๆ) -## ติดตามการทำงาน + นอกจากนี้ยังมีคีย์เวิร์ด `this` ที่เรายังไม่ได้ศึกษา แต่เราจะได้เรียนรู้เร็วๆ นี้แหละ + +## การติดตามการประมวลผล ตอนนี้ถึงเวลา *ติดตาม* การทำงานของสคริปต์แล้ว -มีปุ่มสำหรับการติดตามอยู่ที่ด้านบนของแผงควบคุมด้านขวา มาใช้งานมันกัน +มีปุ่มสำหรับการติดตามอยู่ที่ด้านบนของแผงด้านขวา มาลองใช้กันเลย - -- "Resume": ดำเนินการต่อ, คีย์ลัด `key:F8` -: ดำเนินการทำงานต่อไป ถ้าไม่มี breakpoint เพิ่มเติม การทำงานก็จะดำเนินต่อไป และ debugger จะไม่มีการควบคุม + -- "Resume": ดำเนินการประมวลผลต่อ, ปุ่มลัด `key:F8` +: ดำเนินการประมวลผลโค้ดต่อไป ถ้าไม่มี breakpoint เพิ่มเติม การประมวลผลจะดำเนินต่อเรื่อยๆ และตัวดีบักเกอร์จะหยุดควบคุมการทำงาน - นี่คือสิ่งที่เราจะเห็นหลังจากคลิกปุ่มนี้: + นี่คือสิ่งที่เราจะเห็นหลังจากคลิกที่ปุ่มนี้: ![](chrome-sources-debugger-trace-1.svg) - การทำงานได้ดำเนินต่อไป ไปถึง breakpoint อื่นใน `say()` และหยุดการทำงานที่นั่น ดู "Call Stack" ที่ด้านขวา มันเพิ่มขึ้นอีกหนึ่งการเรียก ตอนนี้เราอยู่ใน `say()` แล้ว + การประมวลผลได้ดำเนินต่อไปแล้ว ไปถึง breakpoint อีกจุดหนึ่งภายในฟังก์ชัน `say()` และหยุดอยู่ที่นั่น ลองดูที่ "Call Stack" ทางด้านขวา จะเห็นว่ามีการเรียกเพิ่มขึ้นมาอีกหนึ่งชั้น ตอนนี้เรากำลังอยู่ภายในฟังก์ชัน `say()` - -- "Step": รันคำสั่งถัดไป, คีย์ลัด `key:F9` -: รันคำสั่งถัดไป ถ้าเราคลิกตอนนี้ `alert` จะแสดงออกมา + -- "Step": ดำเนินคำสั่งถัดไป, ปุ่มลัด `key:F9` +: ดำเนินการตามคำสั่งถัดไป ถ้าเราคลิกตอนนี้ จะมี `alert` ปรากฏขึ้น - คลิกตรงนี้อีกครั้งแล้วอีกครั้ง จะทำให้สามารถติดตามคำสั่งในสคริปต์ทีละคำสั่งได้ + คลิกแบบนี้ซ้ำๆ จะทำให้ผ่านคำสั่งต่างๆ ในสคริปต์ไปทีละคำสั่ง - -- "Step over": รันคำสั่งถัดไป แต่*ไม่ต้องเข้าไปในฟังก์ชัน*, คีย์ลัด `key:F10` -: คล้ายกับปุ่ม "Step" ก่อนหน้า แต่จะมีพฤติกรรมแตกต่างกันหากคำสั่งถัดไปเป็นการเรียกฟังก์ชัน (ไม่ใช่ฟังก์ชันในตัว เช่น `alert` แต่เป็นฟังก์ชันที่เราสร้างเอง) + -- "Step over": ดำเนินคำสั่งถัดไป แต่ *ไม่ต้องเข้าไปในฟังก์ชัน*, ปุ่มลัด `key:F10` +: คล้ายกับคำสั่ง "Step" ก่อนหน้า แต่จะทำงานแตกต่างกันถ้าคำสั่งถัดไปเป็นการเรียกฟังก์ชัน (ไม่ใช่ฟังก์ชันในตัว เช่น `alert` แต่เป็นฟังก์ชันที่เราสร้างเอง) - หากเราเปรียบเทียบกัน คำสั่ง "Step" จะเข้าไปในฟังก์ชันที่ถูกเรียกซ้อนและหยุดการทำงานที่บรรทัดแรก ในขณะที่ "Step over" จะรันฟังก์ชันที่ถูกเรียกซ้อนโดยที่เราไม่เห็น โดยข้ามส่วนภายในฟังก์ชันไป + ถ้าเปรียบเทียบกัน คำสั่ง "Step" จะเข้าไปในการเรียกฟังก์ชันซ้อน และหยุดการประมวลผลที่บรรทัดแรกของฟังก์ชันนั้น แต่ "Step over" จะประมวลผลการเรียกฟังก์ชันซ้อนโดยที่เราไม่เห็น ข้ามการทำงานภายในฟังก์ชันไป - การทำงานจะหยุดทันทีหลังจากการเรียกฟังก์ชันนั้น + จากนั้นการประมวลผลจะหยุดทันทีหลังจบการเรียกฟังก์ชันนั้น - นั่นเป็นเรื่องดีถ้าเราไม่สนใจที่จะดูว่าเกิดอะไรขึ้นภายในการเรียกฟังก์ชัน + นี่จะมีประโยชน์ถ้าเราไม่สนใจที่จะดูว่ามีอะไรเกิดขึ้นภายในฟังก์ชันนั้นบ้าง - -- "Step into", คีย์ลัด `key:F11` -: คล้ายกับ "Step" แต่จะมีพฤติกรรมแตกต่างกันในกรณีของการเรียกฟังก์ชันแบบ asynchronous ถ้าคุณเพิ่งเริ่มเรียน JavaScript คุณสามารถละเลยความแตกต่างได้ เพราะเรายังไม่มีการเรียกแบบ asynchronous + -- "Step into", ปุ่มลัด `key:F11` +: คล้ายกับ "Step" แต่จะทำงานต่างกันกรณีการเรียกฟังก์ชันแบบอะซิงโครนัส ถ้าคุณเพิ่งเริ่มเรียน JavaScript คุณสามารถข้ามส่วนนี้ไปก่อนได้ เพราะเรายังไม่มีการเรียกแบบอะซิงโครนัส - ในอนาคต โปรดจำไว้ว่าคำสั่ง "Step" จะเพิกเฉยต่อ async action เช่น `setTimeout` (การเรียกฟังก์ชันที่ถูกกำหนดเวลา) ซึ่งจะรันทีหลัง ส่วน "Step into" จะเข้าไปในโค้ดของ async action และรอถ้าจำเป็น ดูรายละเอียดเพิ่มเติมได้ใน [คู่มือ DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) + แค่จำไว้ว่าคำสั่ง "Step" จะข้ามการทำงานแบบ async เช่น `setTimeout` (การเรียกฟังก์ชันตามเวลาที่กำหนด) ที่จะประมวลผลภายหลัง ส่วน "Step into" จะเข้าไปในโค้ดส่วนนั้น รอจนกว่ามันจะเสร็จถ้าจำเป็น อ่านรายละเอียดเพิ่มเติมได้ใน [คู่มือ DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) - -- "Step out": ดำเนินการทำงานต่อจนถึงบรรทัดสุดท้ายของฟังก์ชันปัจจุบัน, คีย์ลัด `key:Shift+F11` -: ดำเนินการทำงานต่อและหยุดที่บรรทัดสุดท้ายของฟังก์ชันปัจจุบัน นั่นมีประโยชน์เมื่อเราเข้าไปในการเรียกฟังก์ชันซ้อนโดยไม่ตั้งใจโดยใช้ แต่เราไม่สนใจมัน และเราต้องการดำเนินต่อจนถึงจุดจบของมันให้เร็วที่สุด + -- "Step out": ดำเนินการประมวลผลต่อจนจบฟังก์ชันปัจจุบัน, ปุ่มลัด `key:Shift+F11` +: ดำเนินการประมวลผลโค้ดต่อไปจนถึงบรรทัดสุดท้ายของฟังก์ชันปัจจุบัน ใช้เมื่อเราเข้าไปในฟังก์ชันซ้อนโดยไม่ได้ตั้งใจโดยใช้ แต่ไม่ได้สนใจการทำงานในนั้น และอยากให้มันจบโดยเร็ว -- เปิด/ปิดใช้งาน breakpoint ทั้งหมด -: ปุ่มนี้ไม่ได้เลื่อนการทำงาน แค่เปิด/ปิดใช้งาน breakpoint ทั้งหมด +: ปุ่มนี้ไม่ได้เลื่อนการประมวลผล แต่เป็นการเปิด/ปิด breakpoint ทั้งหมดพร้อมกัน -- เปิด/ปิดการหยุดอัตโนมัติเมื่อมีข้อผิดพลาด -: เมื่อเปิดใช้งาน หากเครื่องมือนักพัฒนาถูกเปิดอยู่ ข้อผิดพลาดระหว่างการรันสคริปต์จะหยุดโดยอัตโนมัติ แล้วเราสามารถวิเคราะห์ตัวแปรใน debugger เพื่อดูว่าอะไรผิดพลาด ดังนั้นหากสคริปต์ของเราล้มเหลวด้วยข้อผิดพลาด เราสามารถเปิด debugger เปิดใช้งานตัวเลือกนี้ และรีโหลดหน้าเว็บเพื่อดูว่ามันล้มเหลวที่ไหนและบริบทในขณะนั้นเป็นอย่างไร +: เมื่อเปิดใช้งาน หากเครื่องมือนักพัฒนากำลังเปิดอยู่ เวลามีข้อผิดพลาดเกิดขึ้นระหว่างการประมวลผลสคริปต์ มันจะหยุดทำงานทันที ซึ่งเราสามารถใช้ตรวจสอบค่าตัวแปรต่างๆ ในตัวดีบักเกอร์เพื่อดูว่ามีอะไรผิดปกติ ดังนั้นถ้าสคริปต์ของเราหยุดการทำงานเพราะข้อผิดพลาด เราสามารถเปิดตัวดีบักเกอร์ เปิดใช้งานตัวเลือกนี้ แล้วโหลดหน้าเว็บใหม่เพื่อดูว่ามันหยุดที่ตรงไหน และสถานะตอนนั้นเป็นยังไง -```smart header="ดำเนินไปที่นี่" -คลิกขวาบนบรรทัดโค้ด จะเปิดเมนูบริบทที่มีตัวเลือกที่ดีเรียกว่า "Continue to here" +```smart header="Continue to here" +คลิกขวาที่บรรทัดโค้ดจะเปิดเมนูบริบท ซึ่งมีตัวเลือกที่ดีมากอย่าง "Continue to here" -นั่นมีประโยชน์เมื่อเราต้องการเลื่อนหลายขั้นตอนไปยังบรรทัดนั้น แต่เรายังขี้เกียจตั้ง breakpoint +นี่จะมีประโยชน์เมื่อเราอยากข้ามไปหลายขั้นตอนจนถึงบรรทัดนั้น แต่ขี้เกียจตั้ง breakpoint ``` -## Logging +## การเก็บล็อก -เพื่อแสดงผลบางอย่างไปที่คอนโซลจากโค้ดของเรา มีฟังก์ชัน `console.log` +เพื่อแสดงผลบางอย่างไปยังคอนโซลจากโค้ดของเรา เราสามารถใช้ฟังก์ชัน `console.log` -ตัวอย่างเช่น นี่จะแสดงค่าจาก `0` ถึง `4` ในคอนโซล: +ตัวอย่างเช่น โค้ดนี้จะแสดงค่าตั้งแต่ `0` ถึง `4` ไปที่คอนโซล: ```js run -// เปิดคอนโซลเพื่อดู +// เปิดคอนโซลเพื่อดูผลลัพธ์ for (let i = 0; i < 5; i++) { - console.log("ค่า,", i); + console.log("value,", i); } ``` -ผู้ใช้ทั่วไปจะไม่เห็นเอาต์พุตนี้ มันจะอยู่ในคอนโซล หากต้องการดูมัน ให้เปิดแผงควบคุม Console ของเครื่องมือนักพัฒนา หรือกด `key:Esc` ในขณะที่อยู่ในแผงควบคุมอื่น: นั่นจะเปิดคอนโซลที่ด้านล่าง +ผู้ใช้ทั่วไปจะไม่เห็นผลลัพธ์นี้ เพราะมันอยู่ในคอนโซล หากต้องการดู ให้เปิดแผง Console ในเครื่องมือสำหรับนักพัฒนา หรือกด `key:Esc` ในขณะที่อยู่ในแผงอื่น ซึ่งจะเปิดคอนโซลขึ้นมาที่ด้านล่างของหน้าจอ + +ถ้าเรามีการล็อกในโค้ดมากพอ เราจะสามารถติดตามได้ว่ากำลังเกิดอะไรขึ้นจากข้อมูลที่ถูกบันทึกไว้ โดยไม่จำเป็นต้องใช้ตัวดีบักเกอร์ -ถ้าเรามีการล็อกในโค้ดของเรามากพอ เราจะสามารถเห็นว่ากำลังเกิดอะไรขึ้นจากบันทึก โดยไม่ต้องใช้ debugger +ข้อความสรุปนี้อธิบายวิธีการหยุดการทำงานของสคริปต์และการใช้งานเครื่องมือนักพัฒนาได้ดีมากครับ ภาษาที่ใช้ก็ชัดเจนเข้าใจง่าย ## สรุป -อย่างที่เราเห็น มีสามวิธีหลักในการหยุดสคริปต์: -1. Breakpoint +อย่างที่เราเห็น มีสามวิธีหลักในการหยุดการทำงานของสคริปต์: +1. จุดหยุด (breakpoint) 2. คำสั่ง `debugger` -3. ข้อผิดพลาด (ถ้าเครื่องมือนักพัฒนาถูกเปิด และปุ่ม เป็น "on") +3. ข้อผิดพลาด (ถ้าเครื่องมือนักพัฒนากำลังเปิดอยู่และปุ่ม อยู่ในสถานะ "เปิด") -เมื่อหยุดการทำงาน เราสามารถดีบั๊ก: ตรวจสอบตัวแปรและติดตามโค้ดเพื่อดูว่าการทำงานผิดพลาดที่ไหน +เมื่อหยุดแล้ว เราสามารถดีบักได้โดยการตรวจสอบค่าตัวแปรและติดตามการทำงานของโค้ด เพื่อดูว่าการประมวลผลผิดพลาดตรงจุดไหน -มีตัวเลือกอีกมากมายในเครื่องมือนักพัฒนามากกว่าที่กล่าวถึงที่นี่ คู่มือฉบับเต็มอยู่ที่ +เครื่องมือนักพัฒนามีตัวเลือกอีกมากมายนอกเหนือจากที่กล่าวถึงที่นี่ สามารถอ่านคู่มือฉบับเต็มได้ที่ -ข้อมูลจากบทนี้เพียงพอที่จะเริ่มการดีบั๊ก แต่ในภายหลัง โดยเฉพาะอย่างยิ่งหากคุณทำงานกับเบราว์เซอร์มาก โปรดไปที่นั่นและดูความสามารถขั้นสูงของเครื่องมือนักพัฒนา +ข้อมูลในบทความนี้เพียงพอสำหรับการเริ่มต้นดีบัก แต่ในภายหลัง โดยเฉพาะถ้าคุณต้องทำงานกับเบราว์เซอร์บ่อยๆ แนะนำให้ไปศึกษาเพิ่มเติมเกี่ยวกับความสามารถขั้นสูงของเครื่องมือนักพัฒนา -โอ้ และคุณยังสามารถคลิกที่ตำแหน่งต่างๆ ของเครื่องมือนักพัฒนาและดูเพียงว่ามีอะไรปรากฏขึ้น นั่นอาจเป็นเส้นทางที่เร็วที่สุดในการเรียนรู้เครื่องมือนักพัฒนา อย่าลืมคลิกขวาและเมนูบริบท! +อ้อ แล้วก็คุณสามารถคลิกที่ส่วนต่างๆ ของเครื่องมือนักพัฒนา แล้วสังเกตดูว่ามีอะไรปรากฏขึ้นบ้าง นี่น่าจะเป็นวิธีที่เร็วที่สุดในการเรียนรู้การใช้งานเครื่องมือนักพัฒนา และอย่าลืมลองคลิกขวาเพื่อเปิดเมนูบริบทดูด้วยล่ะ! \ No newline at end of file