使用VSCode插件快速调试浏览器环境-VSCode-PHP中文网

必须用pwa-chrome，vs code 1.70+已弃用chrome类型；需配对launch.json与浏览器启动方式，确保url、webroot、sourcemaps精准匹配，否则断点不命中、source map失效。

使用vscode插件快速调试浏览器环境

能直接用，但必须配对 launch.json 和浏览器启动方式，否则断点不命中、刷新没反应、source map 找不到文件是常态。

优先用 pwa-chrome。VS Code 1.70+ 已将旧版 chrome 类型标记为弃用，pwa-chrome 支持现代调试协议、Service Worker、ESM 模块断点和更准确的 source map 映射。

如果你看到断点变空心圆（未绑定）、F5 启动后 Chrome 打开但无调试连接，大概率是用了过时的 "type": "chrome"。

这两个字段错一个，断点就全失效。关键不是“能不能打开页面”，而是“VS Code 能不能把浏览器里运行的脚本路径，精准映射回你编辑器里的源文件”。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

用 Live Server（端口 5500）：url 填 "http://127.0.0.1:5500/index.html"，webRoot 填 "${workspaceFolder}"
用 Vite（默认 5173）：url 填 "http://localhost:5173/"，webRoot 同样是 "${workspaceFolder}"，并确认 vite.config.ts 中 build.sourcemap 为 true
直接打开本地 HTML 文件：url 必须用 file:/// 协议，例如 "file:///Users/name/project/index.html"，webRoot 填该 HTML 所在目录（不是父级）
webpack-dev-server：url 填实际访问地址（如 "http://localhost:8080"），webRoot 填源码目录（通常是 "${workspaceFolder}/src"），不是 dist

常见原因不是插件没装，而是底层通信没通或映射断了。先看 VS Code 输出面板中 “Debug” 或 “Chrome” 频道有没有报错，再逐项核对：

Chrome 是否已关闭所有实例？重复使用 --remote-debugging-port=9222 会冲突，建议让 VS Code 自动管理端口（不手动加参数）
检查 sourceMaps 是否开启："sourceMaps": true 必须显式写在配置里，尤其当 JS 是构建产物时
如果用的是 TypeScript 或 JSX，确保编译输出中包含 .map 文件，且路径没被 webpack 的 devtoolModuleFilenameTemplate 破坏
某些框架（如 Svelte）需额外配置 sourceMapPathOverrides，例如："webpack://[name]/[folder]/[module]": "${webRoot}/[folder]/[module]"

它不是替代 Debugger for Chrome 的方案，而是补充——当你只想快速看 HTML/CSS 效果、检查 DOM 结构、模拟设备尺寸，且**不依赖外部服务或复杂构建流程**时，Browser Preview 最省事。

优点：无需启动 HTTP 服务、不用配 launch.json、修改保存后自动刷新（默认开启 Live Reload）
缺点：不支持 debugger 语句、无法设断点、不能查看网络请求或控制台日志（除非启用独立 DevTools 窗口）
适用场景：静态页面原型、CSS 样式微调、Markdown 预览、教学演示
注意：它调用的是系统 Chrome，但不会复用你的日常用户数据；若 Chrome 路径变更（如更新后路径不同），需在设置里手动更新 browserPreview.chromeExecutablePath

真正卡住的往往不是“怎么启动”，而是 webRoot 指向了错误层级，或 sourceMaps 在构建阶段被静默丢弃——这两处一错，整个调试链就断了，连 console.log 都比断点可靠。