วิธี Debug JavaScript ใน Visual Studio

Debug JavaScript ใน Visual Studio (Windows) ทำได้โดยตั้งค่า Internet Options และใช้ Debugger ของ VS

ขั้นตอน

1. เปิด Visual Studio → เลือก Project ใน Solution Explorer
2. Right-click Project → Browse With... → ตั้ง Default Browser (Chrome/Edge/Firefox)
3. เปิด Internet Options (Start → พิมพ์ "Internet Options")
4. แท็บ Advanced → หากลุ่ม Browsing → Uncheck ทั้งสอง:
   • ☐ Disable script debugging (Internet Explorer)
   • ☐ Disable script debugging (Other)
5. กด Apply → OK
6. ตั้ง Breakpoints ในไฟล์ .js (คลิกขอบซ้ายหมายเลขบรรทัด)
7. กด Debug (F5 หรือปุ่ม Play สีเขียว)

ภาพประกอบ

(รูปภาพต้นฉบับแสดง Internet Options Dialog: Advanced Tab, Browsing Section, Disable Script Debugging Unchecked)

หมายเหตุสำคัญ

• การตั้งค่านี้เกี่ยวกับ Internet Explorer / Legacy Edge (EdgeHTML) สำหรับ Modern Edge (Chromium), Chrome, Firefox ใช้ DevTools ของ Browser เองดีกว่า (F12)
• Visual Studio 2019/2022 รองรับ JavaScript Debugging ตรงใน IDE (Attach to Process, Chrome Debugging Extension)
• สำหรับ ASP.NET Core: ใช้ launchSettings.json กำหนด Browser และ Debug Profile

วิธีทันสมัยใน VS 2022+

• JavaScript Debug Terminal: Terminal → JavaScript Debug Terminal → รัน npm start
• Attach to Chrome: Debug → Attach to Process → Chrome (ต้องรัน Chrome ด้วย --remote-debugging-port=9222)
• Launch.json: กำหนด Config สำหรับ Chrome/Edge/Node.js

// .vscode/launch.json Example
{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "https://localhost:3000",
  "webRoot": "${workspaceFolder}"
}