ดีบัก 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 ของแผงแหล่งที่มา

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

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

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

   

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

   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 ดูน่าสงสัย เครื่องหมายนี้อยู่ในเครื่องหมายคำพูด ซึ่งหมายความว่าเป็นสตริง นี่เป็นสมมติฐานที่ดีในการอธิบายสาเหตุของข้อบกพร่อง ตอนนี้ได้เวลารวบรวมข้อมูลเพิ่มเติมแล้ว เครื่องมือสำหรับนักพัฒนาเว็บมีเครื่องมือมากมายสำหรับตรวจสอบค่าตัวแปร

วิธีที่ 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 เครื่องมือสำหรับนักพัฒนาเว็บจะประเมินข้อความดังกล่าวและพิมพ์ 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-3 อย่างที่ไม่ได้อธิบายในบทแนะนำนี้ ดูข้อมูลเพิ่มเติมได้ในขั้นต่อโค้ด