VSCode中集成Google Chrome调试器教程-VSCode-PHP中文网

vscode调试chrome需三要素齐备：pwa-chrome类型配置、命令行启动chrome并指定--remote-debugging-port、webroot与url路径严格匹配源码结构，缺一即导致断点灰色失效。

vscode中集成google chrome调试器教程

VSCode 里配 Chrome 调试器，不是装个插件点一下就能断点——pwa-chrome 类型、--remote-debugging-port 启动参数、webRoot 和 url 的路径映射，三者缺一不可；任一错位，断点就变灰色，调试会直接失败。

Chrome 必须用命令行启动并指定 `--remote-debugging-port`

双击图标打开的 Chrome 完全不响应 VSCode 的连接请求，报错 Unable to launch browser: "Could not connect to localhost:9222" 是最常见现象。这不是插件问题，是协议根本没开。

先彻底关闭所有 Chrome 进程：Windows 运行 taskkill /f /im chrome.exe；macOS/Linux 执行 pkill -f "Google Chrome"
终端启动命令（端口必须和后续 launch.json 一致）：
macOS/Linux：google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
Windows："C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\tmp\chrome-debug"
--user-data-dir 是强制项，不加会导致 Chrome 拒绝以调试模式启动，或复用主配置引发异常
端口被占？换 9223 或 9224，但 launch.json 中对应字段必须同步改

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

旧教程写的 "type": "chrome" 在 VSCode 1.80+ 已弃用，继续用会静默失败，断点不命中，且无明确报错提示。

VSCode 1.118

微软正式发布 Visual Studio Code 1.118 版本。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控。

下载

正确写法："type": "pwa-chrome" ——它支持现代模块加载、ESM、Source Map v3 等特性
request 字段选 "launch"（VSCode 自动起 Chrome）或 "attach"（连已运行的调试实例），二者逻辑完全不同，不能混用
url 必须是真实可访问地址，如 http://localhost:5173；纯静态 HTML 才用 file:/// 协议，此时应配 file 字段而非 url
webRoot 指向你编辑器里源码的实际根目录，不是构建后的 dist；Vite 项目通常设为 "${workspaceFolder}"，Webpack 项目常需指向 "${workspaceFolder}/src"

Source map 映射错，断点打在 bundle.js 上而不是源码

构建工具（Vite/webpack）生成的 sourcemap 中 sources 字段路径和本地文件结构不匹配，VSCode 就找不到对应源码行——断点虽设上，但永远不触发。

确认构建配置已开启 source map：Vite 中 build.sourcemap: true，Webpack 中 devtool: 'source-map'
sourceMapPathOverrides 几乎必配，值取决于实际 sourcemap 的 sources 内容：
Vite 默认常用："webpack:///./*": "${webRoot}/*"
Webpack Dev Server 常用："webpack:///src/*": "${webRoot}/src/*"
验证方法：在 Chrome DevTools → Sources 面板里展开左侧树，看是否能展开你的 src/ 文件；若只看到 webpack:// 下一堆乱码路径，说明映射失败

调试时断点灰色不可用？先查 `webRoot` 和 `url` 是否匹配

VSCode 断点变灰，代表它“看到断点但不知道该映射到哪行源码”——不是代码没执行，而是路径映射链断了。

如果 url 是 http://localhost:5173，但本地服务根本没起，页面白屏或加载失败，VSCode 无法建立源码关联
如果 webRoot 指向 "${workspaceFolder}/src"，但你的 HTML 实际由 public/index.html 提供，而 JS 引入的是 /src/main.js，路径解析就会错位
Vite 项目注意：url 应填开发服务器地址（如 http://localhost:5173），不是 file:// 路径；webRoot 一般就是项目根目录，不是 src 子目录
Chrome 扩展调试更特殊：url 应为空或填 about:blank，webRoot 指向源码目录，且必须手动以开发者模式加载扩展