在 VS Code 中调试前端 JavaScript 需安装对应浏览器调试扩展（如 Debugger for Chrome）、启用浏览器远程调试端口，并配置 .vscode/launch.json，设置 type、name、port 和 webRoot 后即可通过断点高效调试。
在 VS Code 中调试前端 JavaScript 很方便，关键是配置好 Debugger for Chrome（或 Edge/Firefox 对应扩展）和 launch.json 启动配置，让 VS Code 能与浏览器建立调试连接。
安装对应调试器扩展
VS Code 本身不内置浏览器调试能力，需装官方推荐的扩展：
- Chrome：安装 Debugger for Chrome（由 Microsoft 官方维护，已归档但依然稳定可用；新项目可选 Chrome DevTools 扩展）
- Edge：安装 Microsoft Edge Tools for VS Code（推荐，支持现代 Edge 和自动启动）
- Firefox：安装 Debugger for Firefox（官方维护，兼容性好）
装完重启 VS Code 或重载窗口即可生效。
确保浏览器启用远程调试
部分浏览器需手动开启调试端口，否则 VS Code 连不上：
立即学习“Java免费学习笔记（深入）”；
-
Chrome/Edge：关闭所有实例，用命令行启动（临时）：
chrome.exe --remote-debugging-port=9222 --user-data-dir="C:/temp/chrome-debug"
或 Edge：
msedge.exe --remote-debugging-port=9222 --user-data-dir="C:/temp/edge-debug" - Firefox：默认支持，无需额外设置；如需指定端口，可在 about:config 中设 devtools.debugger.remote-enabled = true，并启动时加 --start-debugger-server 6000
配置 launch.json 启动项
在项目根目录创建 .vscode/launch.json，内容根据目标浏览器选择：
-
自动打开新浏览器窗口（推荐新手）：
设 "url": "http://localhost:3000" + "webRoot": "${workspaceFolder}"，VS Code 会自动拉起带调试端口的浏览器 -
附加到已运行的浏览器（适合复杂场景）：
用 "request": "attach"，并确认浏览器已在 9222 端口监听（见上一步） -
关键字段不能少：
"type"（如 chrome、firefox）、"name"（调试配置名）、"port"（默认 9222）、"webRoot"（映射源码路径，决定断点是否命中）
开始调试 & 常见问题处理
按 Ctrl+Shift+D 打开调试面板，选中配置，点绿色 ▶ 启动。操作如下：
- 在 JS 文件中点击行号左侧设断点（红点），刷新页面即可停住
- 支持查看变量、调用栈、控制台执行表达式、单步跳过/进入/跳出
- 若断点显示“未绑定”：检查 webRoot 是否指向正确源码目录，且网页加载的是未压缩的开发版代码（如用 Webpack，确保 devtool: 'source-map'）
- 若连不上浏览器：确认扩展已启用、浏览器进程无冲突、防火墙未拦截 9222 端口
基本上就这些。配置一次，后续调试点几下就能进断点，比在浏览器里手敲 debugger; 高效得多。
