คำสั่ง debugger; ใน javascript

เพื่อนๆ คงคุ้นเคยกับหน้าจอนี้ใน Developer Tools ของ Chrome/Firefox/Safari ที่เราสามารถกำหนด breakpoint เพื่อหยุดการทำงานโปรแกรม และไล่ดูสถานะของตัวแปรต่างๆ รวมทั้งรันโปรแกรมต่อไปจนถึง breakpoint ต่อไปได้

breakpoint.png
สมมติว่าฟังก์ชันนี้ซับซ้อนมาก… เราก็กำหนด breakpoint และรันโปรแกรม บราวเซอร์0tโชว์สถานะของตัวแปรต่างๆ ว่า ตอนนี้ a = 1, b =2 , …

เรารู้ว่าบราวเซอร์มี feature นี้ช่วยให้เราเขียนโปรแกรมง่ายขึ้น… แต่ไม่ค่อยได้ใช้เพราะการไล่เปิด tab source code และกำหนด breakpoint ตำแหน่งที่เราต้องการนั้นยากเหลือเกิน (บางกรณีทำได้ยากเพราะใช้ dependency injection/asynchronous module load) ทำให้ Chrome ไม่แสดง source code โปรแกรมเราให้เลือก

คำสั่ง debugger; ช่วยคุณได้!

เมื่อหาบรรทัดที่จะกำหนด breakpoint ไม่เจอ (หรือหาเจอแต่ขี้เกียจเพราะใช้เวลานาน) ลองทำตามนี้ดีกว่า

  1. ใส่คำสั่ง debugger; ไว้ใน source code ตำแหน่งที่ต้องการกำหนด breakpoint เช่น
    function addMe() {
        var a = 1;
        var b = 2;
        debugger;  // ใส่บรรทัดนี้
    
        var c = a + b;
        document.getElementById("result").innerHTML = "a + b = " + c;
    }
  2. Reload หน้าเว็บ และเปิด Developer Tool tab Sources (ใช้ได้ใน Chrome, Firefox, Safari)
  3. รันโค้ดให้ถึง breakpoint

breakpoint2.png

อ่านเพิ่มเติม:

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s