VSCode调试浏览器网页需配合Debugger for Edge/Chrome插件及远程调试模式启动浏览器，断点不命中主因是浏览器未以--remote-debugging-port启动或sourceMap路径映射错误。
VSCode 本身不能直接调试浏览器网页，必须配合浏览器的调试协议和对应插件——核心是 Debugger for Edge 或 Debugger for Chrome（后者已归档，推荐用前者或现代替代方案）。
为什么装了插件还连不上浏览器？
常见现象：断点不命中、控制台报 Cannot connect to runtime process、VSCode 显示 “No debug adapter found”。
- Chrome/Edge 必须以远程调试模式启动：
chrome --remote-debugging-port=9222或msedge --remote-debugging-port=9222，普通桌面快捷方式启动的浏览器无法被附加 - Windows 上若用 Microsoft Store 版 Edge，不支持
--remote-debugging-port参数，需改用官网下载的稳定版 - VSCode 的
launch.json中url要写完整（如"http://localhost:3000"），不能只写"/"；若用webRoot，路径必须匹配工作区根目录下的实际文件位置 - 如果项目用 Vite/Webpack Dev Server，确保服务已运行且端口未被占用
launch.json 怎么配才真正生效？
不是复制模板就能用，关键字段取决于你调试的是本地 HTML 还是开发服务器页面。
- 调试本地 HTML 文件：用
type: "pwa-msedge"（或"pwa-chrome"），file:协议路径要绝对，例如"file:///C:/project/index.html" - 调试 localhost 开发页：用
request: "launch"+url，或request: "attach"+port: 9222，后者要求浏览器已用调试端口启动 -
trace: true打开后可在 VSCode 输出面板查看Debug Adapter日志，定位连接失败原因 - 避免混用旧版
chrome类型（已弃用），一律用pwa-msedge或pwa-chrome
断点不触发？检查 sourcemap 和路径映射
尤其在 React/Vue 等打包项目中，TS/JSX 源码与浏览器实际运行代码不一致，断点会失效。
- 确保构建工具生成 sourcemap：
vite build --sourcemap，或 Webpack 中devtool: "source-map" - 在
launch.json中设置sourceMaps: true，并核对webRoot是否指向源码根目录（不是dist或build） - 如果用别名（如
@/components），需在sourceMapPathOverrides中手动映射，例如："webpack:///src/*": "${webRoot}/src/*" - 打开浏览器开发者工具 → Sources 面板，确认左侧能看到你的原始 TS/JSX 文件，而不是打包后的 bundle
最常被忽略的是浏览器启动方式和 sourcemap 路径匹配——这两处错一个，断点就形同虚设。
