ดีบัก JavaScript

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

ขั้นตอนที่ 1: จำลองข้อบกพร่อง

ขั้นตอนแรกในการแก้ไขข้อบกพร่องคือการค้นหาชุดการดำเนินการที่ทำให้เกิดข้อบกพร่องอย่างต่อเนื่อง

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

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

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

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

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บโดยกด Command+Option+J (Mac) หรือ Control+Shift+J (Windows, Linux) ทางลัดนี้จะเปิดแผงคอนโซล

   

2. คลิกแท็บแหล่งที่มา

   

UI ของแผงแหล่งที่มามี 3 ส่วนดังนี้

1. แผง File Navigator ทุกไฟล์ที่หน้าเว็บขอจะแสดงที่นี่
2. แผงตัวแก้ไขโค้ด หลังจากเลือกไฟล์ในแผง File Navigator แล้ว เนื้อหาของไฟล์นั้นจะแสดงที่นี่
3. แผงการแก้ไขข้อบกพร่อง JavaScript เครื่องมือต่างๆ สำหรับตรวจสอบ JavaScript ของหน้าเว็บ หากหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บกว้าง แผงนี้จะแสดงที่ด้านขวาของแผงตัวแก้ไขโค้ด

ขั้นตอนที่ 3: หยุดโค้ดชั่วคราวด้วยเบรกพอยท์

วิธีที่พบบ่อยในการแก้ไขข้อบกพร่องลักษณะนี้คือการแทรกคำสั่ง 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) ที่ไม่ถูกต้องใน Listener เหตุการณ์ click ที่เชื่อมโยงกับปุ่มเพิ่มหมายเลข 1 และหมายเลข 2 ดังนั้น คุณอาจต้องหยุดโค้ดชั่วคราวในเวลาที่ Listener ดำเนินการ click เบรกพอยท์ของ Listener เหตุการณ์ช่วยให้คุณดำเนินการเช่นนั้นได้

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

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

   

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

   function onClick() {
   

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

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

ขั้นตอนที่ 4: เลื่อนดูโค้ด

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

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

   if (inputsAreEmpty()) {
   

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

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

ขั้นตอนที่ 5: ตั้งค่าเบรกพอยท์บรรทัดโค้ด

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

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

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

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

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

ในตัวอย่างนี้ DevTools จะหยุดชั่วคราวบนเบรกพอยท์บรรทัดของโค้ดในบรรทัดที่ 32

ขั้นตอนที่ 6: ตรวจสอบค่าตัวแปร

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

วิธีที่ 1: แผงขอบเขต

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

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

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

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

ภาพหน้าจอด้านบนแสดงแผงนิพจน์การดู (ล่างขวา) หลังจากสร้างนิพจน์นาฬิกา typeof sum หากหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บมีขนาดใหญ่ แผงนิพจน์การดูจะอยู่ทางด้านขวาเหนือแผงเบรกพอยท์ของ Listener เหตุการณ์

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

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

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

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

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

ขั้นตอนที่ 7: ใช้การแก้ไข

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

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

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

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

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

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

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

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