วิธี Debug JavaScript แบบ Senior Developer
เลิกใช้ console.log กับทุกอย่างได้แล้ว คุณกำลังเสียเวลาไปหลายชั่วโมงในทุกๆ สัปดาห์
ผมใช้เวลา 8 ปีในการแก้ปัญหาบน Production และ Workflow นี้จะช่วยลดเวลาในการ Debug ลงได้ถึง 60%
| เครื่องมือ | กรณีการใช้งาน | เวลาที่ประหยัดได้ |
|---|---|---|
| Chrome DevTools Sources | การ Debug แบบทีละขั้นตอน (Step-through debugging) | 40% |
| Conditional Breakpoints | การจำกัดวงของ Bug ใน Loop | 25% |
| Performance Panel | การหาจุดคอขวดของการ Rendering | 35% |
| Network Panel | ปัญหาเรื่อง Timing ของ API | 30% |
| Console.assert | การดักจับ Logic Error ตั้งแต่เนิ่นๆ | 15% |
เลิกหว่าน Log ไปทั่วทุกที่ แล้วเปลี่ยนมาใช้วิธีเหล่านี้แทน
ใช้ Conditional Breakpoints เปิด DevTools Sources คลิกที่เลขบรรทัดเพื่อตั้ง Breakpoint จากนั้นคลิกขวาแล้วเลือก Edit breakpoint เพื่อเพิ่มเงื่อนไข (Condition) ตัว Debugger จะหยุดทำงานก็ต่อเมื่อเงื่อนไขของคุณเป็นจริงเท่านั้น วิธีนี้จะช่วยประหยัดเวลาได้มหาศาลเมื่อต้องจัดการกับ Loop ขนาดใหญ่
ศึกษา Call Stack เมื่อ Debugger หยุดทำงาน ให้ดูที่แผง Call Stack ซึ่งจะแสดงเส้นทางการทำงานที่นำไปสู่ Bug นั้นๆ คุณสามารถคลิกขวาที่ Frame แล้วเลือก Copy stack trace เพื่อบันทึกข้อมูลไว้ได้
ใช้ Log Points หากคุณต้องการดู Output โดยไม่ต้องการให้โค้ดหยุดทำงาน ให้ใช้ Log points โดยการคลิกขวาที่เลขบรรทัดแล้วเลือก Add log point วิธีนี้จะไม่ทำให้ Source Code ของคุณเปลี่ยนแปลง และจะหายไปเองเมื่อคุณปิด DevTools
แก้ไขแอปที่ทำงานช้าด้วย Performance Panel เปิดแท็บ Performance คลิก Record จากนั้นใช้งานหน้าเว็บของคุณประมาณ 5 วินาที แล้วกด Stop recording ให้มองหา "Long tasks" ที่นานกว่า 50ms ใน Main thread ซึ่งจะช่วยเผยให้เห็นปัญหาเรื่อง Layout และการ Painting
ตรวจสอบ Network Panel ตรวจดูในมุมมอง Waterfall หากเห็นแถบสีแดงหรือสีม่วง แสดงว่า Request ถูกบล็อก หากมีช่องว่างขนาดใหญ่ แสดงว่า JavaScript กำลังบล็อก Main thread อยู่ คุณสามารถคลิกขวาที่ Request แล้วเลือก Copy as cURL เพื่อนำไปทดสอบปัญหา API ใน Terminal ของคุณได้
Checklist สำหรับการ Debug ของคุณ:
- ตั้งค่า Conditional Breakpoint
- ตรวจสอบ Call Stack เพื่อดูเส้นทางการทำงาน (Execution path)
- ใช้ Scope panel เพื่อดู Local variables
- เพิ่ม Log point เพื่อติดตามค่าต่างๆ
- บันทึก Performance profile เพื่อหาปัญหาเรื่อง Timing
- ตรวจสอบ Network panel สำหรับปัญหา API
การเปลี่ยนมาใช้ Workflow นี้อาจต้องใช้เวลาประมาณสองสัปดาห์ในการฝึกฝนให้ชำนาญ แต่นี่คือการอัปเกรดประสิทธิภาพการทำงานที่ดีที่สุดสำหรับอาชีพของคุณ เบราว์เซอร์ของคุณมีเครื่องมือเหล่านี้อยู่แล้ว จงใช้มันซะ
Source: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p