JavaScript:
การใช้งานโปรแกรมดีบักเกอร์
วิธีการ:
นี่คือโค้ด JavaScript บางส่วนที่ไม่ทำงานตามที่คาดหวัง:
function buggyMultiply(a, b) {
return a + b; // อุ๊ปส์! นี่ควรเป็นการคูณ ไม่ใช่การบวก
}
let result = buggyMultiply(5, 3);
console.log('Result:', result);ผลลัพธ์ไม่ถูกต้อง:
Result: 8มาดีบักใน Chrome DevTools กัน:
- เปิด JS นี้ในเบราว์เซอร์
- คลิกขวาและเลือก “Inspect” เพื่อเปิด DevTools
- คลิกที่แท็บ “Sources”
- ค้นหาโค้ดส่วนที่ต้องการหรือหน้าและตั้งจุดแหล่งระบบ (breakpoint) โดยคลิกที่หมายเลขบรรทัดข้างคำสั่ง
return - รีเฟรชหน้าเว็บเพื่อกระตุ้นจุดแหล่งระบบ
- ตรวจสอบในแผง “Scope” เพื่อดูตัวแปรท้องถิ่น
aและb - ทำขั้นตอนต่อไปโดยใช้ปุ่ม “Step over next function call”
- หาบั๊กในคำสั่ง
return - แก้ไขโค้ด:
function buggyMultiply(a, b) {
return a * b; // แก้ไขแล้ว!
}
let result = buggyMultiply(5, 3);
console.log('Result:', result);ผลลัพธ์ที่แก้ไข:
Result: 15ลงลึก
ความคิดของการดีบักมีมาตั้งแต่ยุคแรกๆ ของการคอมพิวติ้ง - ตำนานกล่าวด้วยว่ามันเริ่มต้นเมื่อมีการค้นพบแมลงในคอมพิวเตอร์ในยุค 1940! ปัจจุบัน เดบักเกอร์ของ JavaScript เช่นเครื่องมือภายในเบราว์เซอร์ (Chrome DevTools, Firefox Developer Tools) หรือเดบักเกอร์ที่รวมอยู่ใน IDE (Visual Studio Code, WebStorm) นำเสนอฟีเจอร์มากมาย
ทางเลือกอื่นสำหรับเดบักเกอร์ภายในประกอบด้วยเครื่องมือของบุคคลที่สามเช่น WebStorm หรือการใช้ console.log แบบเก่าที่ดีในการออกผลตัวแปร แต่เหล่านี้ไม่เสนอการโต้ตอบแบบเรียลไทม์และการตรวจสอบอย่างละเอียดที่เดบักเกอร์ได้
เกี่ยวกับรายละเอียดการใช้งาน โดยส่วนใหญ่เดบักเกอร์ทำงานในลักษณะเดียวกัน: พวกเขาอนุญาตให้คุณตั้งจุดหยุดที่หยุดการดำเนินการ ทำขั้นตอนผ่านโค้ด ตรวจสอบสถานะตัวแปรปัจจุบัน ดูนิพจน์ และแม้กระทั่งแก้ไขค่าได้ทันทีเพื่อทดลองสถานการณ์ต่างๆ