如何在VSCode中配置浏览器联动调试功能-VSCode-PHP中文网

vscode浏览器联动调试需vs code配置、chrome调试端口、sourcemap路径三者严格对齐；必须用内置javascript debugger、type为"pwa-chrome"、url与浏览器地址栏完全一致、webroot指向源码根目录、chrome命令行启动并暴露调试端口，缺一则断点变空心圆。

如何在vscode中配置浏览器联动调试功能

VSCode 浏览器联动调试不是“装个插件点一下就通”，而是三者必须对齐：VS Code 的 launch.json 配置、Chrome/Edge 的远程调试端口、以及构建工具生成的 sourceMap 路径映射。缺一不可，错一个字段断点就变空心圆。

确认用的是内置 JavaScript Debugger，不是旧版 Debugger for Chrome

VS Code 1.85+ 已将调试能力整合进默认启用的 JavaScript Debugger (Nightly)，旧版 Debugger for Chrome（尤其是 v4.x 或带 legacy 字样的）会直接冲突，导致 Unable to launch browser: unknown error 且无提示。

打开扩展面板（Ctrl+Shift+X），搜 JavaScript Debugger，确认状态为“已启用”
卸载所有名称含 Chrome Debugger、legacy 或发布者非 Microsoft 的类似插件
命令面板中运行 Debug: Open launch.json 能正常打开 → 底层调试器就绪

launch.json 中 type 必须是 `pwa-chrome`，不是 `chrome`

chrome 类型已被标记为 legacy，1.80 后不再维护；现代构建（Vite、Webpack 5+）、ES 模块、动态 import() 下大概率断点不命中。只有 pwa-chrome 支持完整 DevTools 协议，包括 worker、Service Worker 和 sourcemap v3。

VSCode

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

下载

配置示例（直接可用）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

url 必须和浏览器地址栏**完全一致**：协议（http://，不能是 file://）、端口（:5173）、路径（/login 末尾斜杠）、哈希（#home）都要匹配
webRoot 指向你编辑的源码根目录，比如 "${workspaceFolder}/src" —— 若断点打在打包后代码里，就是这里错了

Chrome 必须用命令行启动并暴露调试端口

双击图标打开的 Chrome 默认关闭远程调试协议，VS Code 连不上就会卡在 Could not connect to localhost:9222。这不是配置问题，是 Chrome 根本没暴露接口。

先关掉所有 Chrome 进程：taskkill /f /im chrome.exe（Windows）或 pkill -f "chrome.*9222"（macOS/Linux）
用命令行启动：chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（--user-data-dir 是必须的，否则拒绝以调试模式复用主配置）
如果 9222 被占，换端口如 9223，但仅 request: "attach" 模式才需在 launch.json 显式写 port 字段

sourceMap 必须真实存在且路径可定位

断点灰掉、跳到压缩后代码、Sources 面板看不到 webpack:// 或 vite:// —— 全是 sourceMap 没生效的表现。VS Code 不会猜路径，它只按配置去读 .map 文件。

Vite 项目：确认 vite.config.ts 中 build.sourcemap: true（推荐 build.sourcemap: 'inline'，避免路径解析失败）
Webpack 项目：devtool: 'source-map' 或 'inline-source-map'，别用 'eval' 类型
检查浏览器 DevTools → Sources 面板能否展开原始源码；不能 → 构建阶段就没输出有效 map
若构建产物在 dist/，而源码在 src/，可在 launch.json 加 "sourceMapPathOverrides": { "webpack:///src/*": "${workspaceFolder}/src/*" }