VS Code 调试网页 JS 依赖内置 vscode-js-debug 与浏览器建立 WebSocket 连接，需配置 launch.json 使用 "type": "pwa-chrome"，确保 source map 正确生成与路径映射，且在 development 模式下调试。
VS Code 本身不直接执行网页 JavaScript，调试必须依赖浏览器；所谓“用 VS Code 调试网页 JS”，本质是通过 Debugger for Chrome 或 Debugger for Edge（或现代的 vscode-js-debug）与浏览器建立 WebSocket 连接，把断点、变量查看、调用栈等能力透传到 VS Code 界面。
确认你用的是 vscode-js-debug（不是旧版 Chrome Debugger）
VS Code 1.47+ 默认内置 vscode-js-debug，它不再需要单独安装扩展，也不依赖本地 Chrome 安装路径。如果你仍手动装了 Debugger for Chrome 扩展，请卸载它——两者冲突会导致 launch.json 不生效、断点灰色、控制台报 Cannot connect to the target: connect ECONNREFUSED。
- 检查方法：打开命令面板（
Ctrl+Shift+P），输入Debug: Toggle Auto Attach，如果存在且可切换，说明已启用内置调试器 - 旧版配置里写
"type": "chrome"仍可用，但推荐统一用"type": "pwa-chrome"（PWA = Progressive Web App，实际是新调试器的标识） - 若误启用了旧扩展，即使删掉
node_modules/.vscode或重装 VS Code，也可能残留缓存，建议彻底关闭 VS Code 后手动删除~/.vscode/extensions/msjsdiag.debugger-for-chrome-*
配置 launch.json 让 VS Code 打开并附加到浏览器
关键不是“连上已有标签页”，而是让 VS Code 启动一个干净的无痕浏览器实例，并自动加载你的 HTML 文件——这样能避开缓存、插件干扰和跨域限制。
- 项目根目录下建
.vscode/launch.json，内容至少包含：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
-
url必须是完整 URL（不能是./index.html）；若用本地文件协议，改用"file:///${workspaceFolder}/index.html"，但注意 Chrome 会禁用fetch和某些 API -
webRoot决定源码映射路径，若调试的是构建后代码（如 Vite/Vue/React），务必配好sourceMapPathOverrides，否则断点打在 bundle.js 上，无法跳转回原始.ts或.jsx - 没起本地服务？可以用
"request": "attach"模式，但需手动在 Chrome 地址栏输入chrome://inspect→ Open dedicated DevTools for Node → 点击你的页面，再在 VS Code 里选对应配置启动 attach
断点不命中？先看这三个地方
断点变空心圆（未绑定）、控制台报 Breakpoint ignored because generated code not found，基本都出在这三处。
立即学习“Java免费学习笔记（深入）”；
- 源码地图（source map）没生成：检查构建工具配置，Vite 默认开
build.sourcemap: true，Webpack 需设devtool: 'source-map'；构建后确认输出目录存在.js.map文件 - 路径映射错位：
sourceMapPathOverrides中左边是 map 文件里写的原始路径（常含webpack:///、webpack://），右边是本地磁盘路径；用 Chrome DevTools 的 Sources 面板右键某个 JS 文件 →Reveal in Explorer，对比路径是否匹配 - 代码被压缩/混淆：生产环境 build 默认压缩，断点失效是正常现象；调试务必在
development模式下进行，Vite 用vite命令而非vite build
真正麻烦的不是配置，而是当你的代码经过多层 loader（比如 Babel + TypeScript + Vue SFC），source map 链断裂一环，VS Code 就只能停在编译后的 JS 上。这时候别硬调，先在 Chrome DevTools 里确认能否正确映射到源码——如果浏览器里都看不到原始文件，VS Code 一定也做不到。
