ดีบัก JavaScript

Kayce Basques

Sofia Emelianova

บทแนะนํานี้จะอธิบายเวิร์กโฟลว์พื้นฐานสำหรับการแก้ไขข้อบกพร่อง JavaScript ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ อ่านต่อหรือดูบทแนะนำเวอร์ชันวิดีโอ

จำลองข้อบกพร่อง

การค้นหาชุดการดำเนินการที่ทำให้เกิดข้อบกพร่องซ้ำๆ เสมอเป็นขั้นตอนแรกในการแก้ไขข้อบกพร่องเสมอ

1. เปิดการสาธิตนี้ในแท็บใหม่
2. กรอก 5 ในช่องตัวเลข 1
3. ป้อน 1 ในช่องหมายเลข 2
4. คลิกเพิ่มหมายเลข 1 และหมายเลข 2 ป้ายกำกับใต้ปุ่มระบุว่า 5 + 1 = 51 ผลลัพธ์ควรเป็น 6 นี่คือข้อบกพร่องที่คุณจะต้องแก้ไข

ในตัวอย่างนี้ ผลลัพธ์ของ 5 + 1 คือ 51 ซึ่งควรเป็น 6

ทำความคุ้นเคยกับ UI ของแผงแหล่งที่มา

DevTools มีเครื่องมือมากมายสำหรับงานต่างๆ เช่น การเปลี่ยน CSS การปรับประสิทธิภาพของการโหลดหน้าเว็บ การตรวจสอบคำขอเครือข่าย แผงแหล่งที่มาเป็นที่ที่คุณแก้ไขข้อบกพร่อง JavaScript

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่แผงแหล่งที่มา

   

แผงแหล่งที่มามี 3 ส่วน ได้แก่

1. แท็บหน้าที่มีโครงสร้างไฟล์ ทุกไฟล์ที่หน้าเว็บขอจะแสดงที่นี่
2. ส่วนเครื่องมือแก้ไขโค้ด หลังจากเลือกไฟล์ในแท็บหน้าเว็บแล้ว เนื้อหาของไฟล์นั้นจะแสดงที่นี่

3. ส่วนโปรแกรมแก้ไขข้อบกพร่อง เครื่องมือต่างๆ สำหรับตรวจสอบ JavaScript ของหน้าเว็บ

   หากหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์กว้าง โปรแกรมแก้ไขข้อบกพร่องจะอยู่ทางด้านขวาของเครื่องมือแก้ไขโค้ดโดยค่าเริ่มต้น ในกรณีนี้ แท็บขอบเขตและดูจะรวมกับจุดหยุด สแต็กการเรียก และอื่นๆ เป็นส่วนที่ยุบได้

หยุดโค้ดชั่วคราวด้วยเบรกพอยต์

วิธีทั่วไปในการแก้ไขข้อบกพร่องของปัญหาเช่นนี้คือการแทรกconsole.log()คำสั่ง จำนวนมากลงในโค้ดเพื่อตรวจสอบค่าขณะที่สคริปต์ทำงาน เช่น

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

วิธีการ console.log() อาจทํางานได้ แต่จุดพักทํางานได้เร็วกว่า เบรกพอยท์ช่วยให้คุณหยุดโค้ดชั่วคราวในระหว่างการดำเนินการ และตรวจสอบค่าทั้งหมด ณ เวลานั้นได้ เบรกพอยท์มีข้อดีมากกว่าเมธอด console.log() บางประการ ดังนี้

• เมื่อใช้ console.log() คุณต้องเปิดซอร์สโค้ดด้วยตนเอง ค้นหาโค้ดที่เกี่ยวข้อง แทรกคำสั่ง console.log() แล้วโหลดหน้าเว็บซ้ำเพื่อดูข้อความในคอนโซล เมื่อใช้เบรกพอยท์ คุณจะหยุดชั่วคราวในโค้ดที่เกี่ยวข้องได้โดยไม่ต้องรู้ว่าโค้ดมีโครงสร้างอย่างไร
• ในคำสั่ง console.log() คุณต้องระบุค่าแต่ละค่าที่ต้องการตรวจสอบอย่างชัดเจน เมื่อใช้จุดหยุดพัก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะแสดงค่าของตัวแปรทั้งหมด ณ ขณะนั้น บางครั้งอาจมีตัวแปรที่ส่งผลต่อโค้ดโดยที่คุณไม่รู้ตัว

กล่าวโดยย่อคือ จุดหยุดพักจะช่วยคุณค้นหาและแก้ไขข้อบกพร่องได้เร็วกว่าเมธอด console.log()

หากลองถอยออกมาสักนิดแล้วพิจารณาวิธีการทำงานของแอป คุณจะเดาได้ว่าระบบจะคํานวณผลรวมที่ไม่ถูกต้อง (5 + 1 = 51) ใน click event listener ที่เชื่อมโยงกับปุ่มเพิ่มตัวเลข 1 และ 2 คุณจึงอาจต้องหยุดโค้ดชั่วคราวในช่วงเวลาที่โปรแกรมฟัง click ทำงาน เบรกพอยต์ของ Listener เหตุการณ์ช่วยให้คุณทําสิ่งต่อไปนี้ได้

1. ในส่วนโปรแกรมแก้ไขข้อบกพร่อง ให้คลิกจุดหยุดพักของโปรแกรมรับฟังเหตุการณ์เพื่อขยายส่วน เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายการหมวดหมู่เหตุการณ์ที่ขยายได้ เช่น ภาพเคลื่อนไหวและคลิปบอร์ด
2. ถัดจากหมวดหมู่เหตุการณ์เมาส์ ให้คลิก arrow_right ขยาย เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายการเหตุการณ์เมาส์ เช่น click และ mousedown แต่ละเหตุการณ์จะมีช่องทําเครื่องหมายอยู่ข้างๆ

3. เลือกช่องทําเครื่องหมายคลิก ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บได้รับการตั้งค่าให้หยุดชั่วคราวโดยอัตโนมัติเมื่อ Listener เหตุการณ์ใดก็ตาม click ดำเนินการ

   

4. กลับไปที่เดโม แล้วคลิกเพิ่มหมายเลข 1 และหมายเลข 2 อีกครั้ง เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดการสาธิตชั่วคราวและไฮไลต์โค้ด 1 บรรทัดในแผงแหล่งที่มา เครื่องมือสำหรับนักพัฒนาเว็บควรหยุดชั่วคราวที่บรรทัดโค้ดนี้

   function onClick() {
   

   หากคุณหยุดชั่วคราวสำหรับโค้ดบรรทัดอื่น ให้กด ดำเนินการต่อ ดำเนินการสคริปต์ต่อ จนกว่าคุณจะหยุดชั่วคราวในบรรทัดที่ถูกต้อง

เบรกพอยท์ของ Listener เหตุการณ์เป็นเพียงเบรกพอยท์ประเภทหนึ่งในเครื่องมือสำหรับนักพัฒนาเว็บ คุณควรสำรวจเนื้อหาประเภทต่างๆ ทั้งหมด เนื่องจากแต่ละประเภทจะช่วยให้คุณแก้ไขข้อบกพร่องของสถานการณ์ต่างๆ ได้อย่างรวดเร็วที่สุด ดูหัวข้อหยุดโค้ดชั่วคราวด้วยจุดหยุดพักเพื่อดูว่าควรใช้จุดหยุดพักแต่ละประเภทเมื่อใดและอย่างไร

เรียกใช้โค้ดทีละขั้นตอน

สาเหตุที่พบบ่อยหนึ่งของข้อบกพร่องคือเมื่อสคริปต์ทำงานผิดลำดับ การดูโค้ดทีละบรรทัดช่วยให้คุณดูการดําเนินการของโค้ดทีละบรรทัด และดูว่าโค้ดดําเนินการในลําดับที่ต่างออกไปจากที่คุณคาดไว้ตรงไหน ลองเลย

1. ในแผงแหล่งที่มาของเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกstep_into เข้าสู่การเรียกใช้ฟังก์ชันถัดไปเพื่อเข้าสู่การเรียกใช้ฟังก์ชัน onClick() ทีละบรรทัด เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์โค้ดบรรทัดต่อไปนี้

   if (inputsAreEmpty()) {
   

2. คลิก step_over ข้ามการเรียกใช้ฟังก์ชันถัดไป

   เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้ inputsAreEmpty() โดยไม่ต้องดำเนินการใดๆ สังเกตว่าเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ข้ามโค้ดไป 2-3 บรรทัด เนื่องจากประเมิน inputsAreEmpty() เป็น "เท็จ" ทำให้บล็อกโค้ดของคำสั่ง if ไม่สั่งการ

นั่นคือแนวคิดพื้นฐานของการดูโค้ดทีละขั้นตอน เมื่อดูโค้ดใน get-started.js คุณจะเห็นว่าข้อบกพร่องอาจอยู่ในฟังก์ชัน updateLabel() คุณสามารถใช้จุดหยุดพักประเภทอื่นเพื่อหยุดโค้ดชั่วคราวให้อยู่ใกล้กับตำแหน่งที่เป็นไปได้ของข้อบกพร่องมากกว่าการเรียกใช้โค้ดทีละบรรทัด

ตั้งค่าเบรกพอยต์บรรทัดโค้ด

เบรกพอยต์บรรทัดโค้ดเป็นเบรกพอยต์ประเภทที่พบบ่อยที่สุด เมื่อต้องการหยุดชั่วคราวที่บรรทัดโค้ดที่ต้องการ ให้ใช้จุดหยุดพักบรรทัดโค้ด โดยทำดังนี้

1. ดูบรรทัดโค้ดสุดท้ายใน updateLabel()

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. ทางด้านซ้ายของโค้ด คุณจะเห็นหมายเลขบรรทัดของโค้ดบรรทัดนี้ ซึ่งก็คือ 32 คลิก 32 เครื่องมือสำหรับนักพัฒนาเว็บจะวางไอคอนสีน้ำเงินไว้ด้านบน 32 ซึ่งหมายความว่ามีจุดหยุดพักบรรทัดโค้ดในบรรทัดนี้ ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะหยุดชั่วคราวเสมอก่อนที่จะเรียกใช้บรรทัดโค้ดนี้

3. คลิกกลับมาทำงานต่อ ดำเนินการสคริปต์ต่อ สคริปต์จะยังคงทำงานต่อไปจนกว่าจะถึงบรรทัด 32 ในบรรทัดที่ 29, 30 และ 31 เครื่องมือสําหรับนักพัฒนาเว็บจะแสดงค่าของ addend1, addend2 และ sum ในบรรทัดถัดจากการประกาศ

ในตัวอย่างนี้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะหยุดชั่วคราวที่จุดหยุดพักบรรทัดโค้ดในบรรทัด 32

ตรวจสอบค่าตัวแปร

ค่าของ addend1, addend2 และ sum ดูน่าสงสัย มีการใส่เครื่องหมายคำพูด ซึ่งหมายความว่าเป็นสตริง นี่เป็นสมมติฐานที่ดีในการอธิบายสาเหตุของข้อบกพร่อง ตอนนี้ถึงเวลารวบรวมข้อมูลเพิ่มเติม DevTools มีเครื่องมือมากมายสําหรับตรวจสอบค่าตัวแปร

วิธีที่ 1: ตรวจสอบขอบเขต

เมื่อหยุดชั่วคราวในบรรทัดโค้ด แท็บขอบเขตจะแสดงตัวแปรภายในและตัวแปรส่วนกลางที่กําหนดไว้ ณ จุดนี้ของการดำเนินการ พร้อมกับค่าของแต่ละตัวแปร รวมถึงแสดงตัวแปรการปิดท้ายด้วย (หากมี) เมื่อไม่ได้หยุดชั่วคราวในบรรทัดโค้ด แท็บขอบเขตจะว่างเปล่า

ดับเบิลคลิกค่าตัวแปรเพื่อแก้ไข

วิธีที่ 2: นิพจน์การดู

แท็บดูช่วยให้คุณสามารถตรวจสอบค่าของตัวแปรเมื่อเวลาผ่านไป รับชมไม่ได้จำกัดเพียงตัวแปรเท่านั้น โดยคุณเก็บนิพจน์ JavaScript ที่ถูกต้อง ได้ในแท็บดู

ลองเลย

1. คลิกแท็บดู
2. คลิกเพิ่ม เพิ่มนิพจน์การดู
3. พิมพ์ typeof sum
4. กด Enter เครื่องมือสำหรับนักพัฒนาเว็บแสดง typeof sum: "string" ค่าทางด้านขวาของโคลอนคือผลลัพธ์ของนิพจน์

ภาพหน้าจอนี้แสดงแท็บดู (ด้านล่างขวา) หลังจากสร้างนิพจน์การดู typeof sum

ตามที่ได้คาดไว้ ระบบกำลังประเมิน sum เป็นสตริง ทั้งที่ควรจะเป็นตัวเลข ตอนนี้คุณยืนยันแล้วว่าเป็นสาเหตุของข้อบกพร่อง

วิธีที่ 3: คอนโซล

นอกจากการดูข้อความ console.log() แล้ว คุณยังใช้ Console เพื่อประเมินคำสั่ง JavaScript ที่กำหนดเองได้ด้วย ในแง่ของการแก้ไขข้อบกพร่อง คุณใช้คอนโซลเพื่อทดสอบการแก้ไขข้อบกพร่องที่เป็นไปได้ ลองเลย

1. หากไม่ได้เปิดลิ้นชักคอนโซลไว้ ให้กด Escape เพื่อเปิด ซึ่งจะเปิดขึ้นที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ
2. พิมพ์ parseInt(addend1) + parseInt(addend2) ในคอนโซล คำสั่งนี้ใช้งานได้เนื่องจากคุณหยุดชั่วคราวในบรรทัดโค้ดที่ addend1 และ addend2 อยู่ในขอบเขต
3. กด Enter DevTools จะประเมินคำสั่งและพิมพ์ 6 ซึ่งเป็นผลลัพธ์ที่คุณคาดหวังให้แสดงในเดโม

ภาพหน้าจอนี้แสดงลิ้นชักคอนโซลหลังจากประเมิน parseInt(addend1) + parseInt(addend2)

ใช้การแก้ไข

คุณพบวิธีแก้ไขข้อบกพร่องแล้ว ที่เหลือคือลองแก้ไขโดยแก้ไขโค้ดและเรียกใช้การสาธิตอีกครั้ง ทั้งนี้ คุณไม่จำเป็นต้องออกจากเครื่องมือสำหรับนักพัฒนาเว็บเพื่อใช้การแก้ไข คุณแก้ไขโค้ด JavaScript ได้โดยตรงใน UI ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ลองเลย

1. คลิก ดำเนินการต่อ ใช้งานสคริปต์ต่อ
2. ในเครื่องมือแก้ไขโค้ด ให้แทนที่บรรทัด 31, var sum = addend1 + addend2 ด้วย var sum = parseInt(addend1) + parseInt(addend2)
3. กด Command + S (Mac) หรือ Control + S (Windows, Linux) เพื่อบันทึกการเปลี่ยนแปลง
4. คลิก label_off ปิดใช้งานเบรกพอยต์ สีของไอคอนจะเปลี่ยนเป็นสีน้ำเงินเพื่อระบุว่าอุปกรณ์กำลังทำงาน เมื่อตั้งค่านี้ไว้ เครื่องมือสำหรับนักพัฒนาเว็บจะไม่สนใจจุดหยุดพักที่คุณตั้งไว้
5. ลองใช้การสาธิตด้วยค่าต่างๆ เดโมจะคำนวณได้อย่างถูกต้องแล้ว

ขั้นตอนถัดไป

บทแนะนำนี้แสดงเพียง 2 วิธีในการตั้งค่าเบรกพอยท์ เครื่องมือสำหรับนักพัฒนาเว็บมีวิธีอื่นๆ มากมาย รวมถึง

• เบรกพอยท์แบบมีเงื่อนไขที่จะถูกเรียกใช้เมื่อเงื่อนไขที่คุณระบุเป็นจริงเท่านั้น
• เบรกพอยท์ของข้อยกเว้นที่ตรวจพบหรือไม่พบ
• เบรกพอยท์ XHR ที่ทริกเกอร์เมื่อ URL ที่ขอตรงกับสตริงย่อยที่คุณระบุ

ดูหยุดโค้ดชั่วคราวด้วยเบรกพอยท์เพื่อเรียนรู้เวลาและวิธีใช้แต่ละประเภท

มีการควบคุมขั้นตอนการใช้โค้ด 2 รายการที่ไม่ได้อธิบายในบทแนะนำนี้ ดูข้อมูลเพิ่มเติมที่ข้ามบรรทัดโค้ด