使用VSCode调试JavaScript需安装Debugger for Chrome插件，配置launch.json指定本地服务器地址和项目根目录，启动服务后在JS文件中设断点，通过运行与调试面板启动浏览器进行断点调试，支持源码映射与变量查看。
在 VSCode 里调试网页 JavaScript，你可以结合浏览器的调试功能和 VSCode 的开发体验，实现断点调试、变量查看等操作。最常用的方式是通过 Chrome DevTools + VSCode 插件 实现无缝调试。
1. 安装必要插件
打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），安装以下插件：
- Debugger for Chrome（或新版推荐的 Debugger for Microsoft Edge，如果你用的是 Edge）
这个插件允许 VSCode 连接到正在运行的 Chrome 浏览器实例，进行断点调试。
2. 配置 launch.json
点击左侧运行与调试图标（或按 Ctrl+Shift+D），然后点击“创建 launch.json”文件。
立即学习“Java免费学习笔记（深入）”；
选择环境为 Chrome 或 Edge，VSCode 会生成一个基础配置。修改内容如下：
{ "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost", "type": "pwa-chrome", "request": "launch", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*" } } ] }说明：
- url：填写你本地服务器启动后的地址，比如 http://localhost:8080
- webRoot：项目根目录，确保路径映射正确
- 如果你使用了 Webpack 等打包工具，可能需要调整 sourceMapPathOverrides 来正确映射源码
3. 启动本地服务器
确保你的网页通过本地服务器运行。比如：
- 使用 Live Server 插件（VSCode 扩展）右键 HTML 文件选择 “Open with Live Server”
- 或使用命令行：
npx serve、python -m http.server等
记住服务启动的端口（如 8080），并在 launch.json 中对应填写 url。
4. 设置断点并开始调试
在你的 .js 文件中，点击行号左侧设置断点（红点出现即可）。
回到“运行与调试”面板，选择刚才配置的调试项，点击绿色运行按钮。
VSCode 会自动启动 Chrome（或 Edge）并加载页面。当代码执行到断点时，会暂停，你可以在 VSCode 中查看调用栈、作用域变量、监视表达式等。
你也可以在 HTML 中内联脚本或引入的 JS 文件中打断点，只要路径能被正确映射。
5. 调试已打开的页面（附加模式）
如果你想调试已经打开的网页（比如本地开发页），可以使用“attach”模式：
{ "name": "Attach to Chrome", "type": "pwa-chrome", "request": "attach", "port": 9222, "webRoot": "${workspaceFolder}" }前提：启动 Chrome 时开启远程调试端口，例如：
chrome.exe --remote-debugging-port=9222然后运行这个 attach 配置，连接到浏览器实例。
基本上就这些。配置一次后，以后都能一键调试，效率比只用浏览器 DevTools 更高。
