Debugging React with VSCode

1. ติดตั้ง Extension ชื่อ Debugger for Chrome
2. กลับมาที่ VSCode และเปิดส่วนของ Debug และคลิกเพื่อสร้าง Configuration ใหม่

1. จากรายการ เลือกโปรไฟล์เป็น Chrome

1. ทำการแก้ไข เลข IP และ Port ที่ต้องการเปิดใช้งานให้ เรียบร้อย

   เช่น ในที่นี้แอพเรารันใช้งานที่ localhost:3000

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

1. เสร็จเรียบร้อยแล้ว ให้แน่ใจว่าได้รันแอพพลิเคชั่นตามที่กำหนดไว้ใน configuration จริง
2. กดปุ่ม Run Application ในส่วน Debug
3. วาง Breakpoint ให้ Code ได้ตามสะดวก และทดสอบใช้งาน