การดีบั๊ก (Debugging) เป็นกระบวนการอย่างเป็นระบบในการกำจัดข้อบกพร่อง (Bugs) เริ่มจากการรัน Test Cases เปรียบเทียบผลลัพธ์จริงกับที่คาดหวัง หากไม่ตรงกัน จะทำ Root Cause Analysis และรัน Regression Tests
JavaScript ไม่มีเครื่องมือดีบั๊กที่แข็งแกร่งในตัว แต่ Firebug (ส่วนขยาย Firefox) ทำให้ดีบั๊ก JavaScript ง่ายขึ้นมาก หมายเหตุ: Firebug หยุดพัฒนาตั้งแต่ Firefox 57 (2017) ให้ใช้ Firefox DevTools แทน
องค์ประกอบหลักของ Firebug Debugger
1. JSEditor (JavaScript Editor)
อนุญาตให้ดีบั๊กโค้ด JS ด้วยตัวเลือก "Break on All Errors" - ติ๊กเลือกเพื่อหยุดการทำงานของสคริปทันทีที่มีข้อผิดพลาด
2. Script Tab (แท็บสคริปต์)
แท็บที่ 4 ในแผง Firebug (Console, HTML, CSS, Script) แบ่งเป็น 2 ส่วน:
- ซ้าย: JavaScript Editor
- ขวา: Watch Panel และ Breakpoint Panel
3. JSFileSelector
แสดงรายการไฟล์ JavaScript ทั้งหมดที่โหลดในหน้าเว็บ
4. Breakpoint
จุดหยุดการทำงานของ JavaScript มี 3 ประเภท:
- Static Breakpoint - คลิกที่บรรทัดโค้ดใน Script Panel
- Conditional Breakpoint - หยุดเมื่อเงื่อนไขเป็นจริง
- Dynamic Breakpoint - ตั้งจากคำสั่ง Command Line ด้วยฟังก์ชัน
debug(fn)และundebug(fn)
5. List of Breakpoints
แสดงรายการ Breakpoints ทั้งหมด สามารถลบที่ไม่ต้องการได้
6. Watch Window
แสดงค่าตัวแปรทั้งหมดในขอบเขต (Scope) ปัจจุบัน ต่างจาก Visual Studio ที่แสดงเฉพาะตัวแปรที่เลือก
วิธีติดตั้ง Firebug Add-on (เก่า - สำหรับ Firefox รุ่นเก่า)
- เปิด Firefox → Open Menu (มุมขวาบน) → Add-ons
- ค้นหา "Firebug" → กด Install
ขั้นตอนการดีบั๊ก 8 ขั้นตอน (Firebug Legacy)
- เขียนโค้ด JS บันทึกเป็น .htm → เปิดใน Firefox → เปิด Firebug Console
- ตั้ง Static Breakpoint ที่บรรทัดที่ต้องการ
- รันทีละบรรทัดด้วยปุ่ม Step Over (F10) ปุ่มอื่น: Continue (F8), Step Into (F11), Step Out
- สังเกตค่าใน Watch Window
- หา Bug และแก้ไข
- Reload หน้า (Ctrl+R)
- ถ้าตัวแปรหาย ใช้ CommandLine API:
debug(fn),undebug(fn) - รันทดสอบอีกครั้ง → บันทึกไฟล์
🔄 ทดแทนด้วย Firefox DevTools (สมัยใหม่)
Firefox DevTools ในปัจจุบันมีความสามารถครบครันและทันสมัยกว่า:
- เปิดด้วย F12 หรือ Ctrl+Shift+I
- แท็บ Debugger - Breakpoints, Watch, Call Stack, Scopes
- แท็บ Console - REPL, Logs, Errors
- แท็บ Network - ตรวจสอบ Request/Response
- แท็บ Storage - Cookies, LocalStorage, IndexedDB
หมายเหตุ: บทความนี้เป็นเอกสารทางประวัติศาสตร์ Firebug หยุดพัฒนาตั้งแต่ 2017 โปรดใช้ Firefox DevTools หรือ Chrome DevTools แทนซึ่งมีความสามารถทันสมัยและรองรับมาตรฐานเว็บปัจจุบัน
