如何在VSCode安装浏览器调试插件-VSCode-PHP中文网

chrome调试需命令行启动并配置pwa-chrome、正确webroot和sourcemappathoverrides；旧版debugger for chrome已弃用，javascript debugger内置即可。

如何在vscode安装浏览器调试插件

装插件本身不难，难的是装完发现断点灰色、连不上、跳转错文件——根本原因不是插件没装对，而是调试协议没打通，或者配置和 Chrome 实际运行状态不匹配。

VS Code 1.80+ 版本起，JavaScript Debugger 已作为核心功能内置，不再需要手动安装旧版 Debugger for Chrome 扩展。如果你在扩展市场搜到它，说明你看到的是遗留版本，装了反而可能引发冲突。

打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Developer: Toggle Developer Tools，确认右下角没有报错，说明调试器正常加载
扩展市场里搜 JavaScript Debugger，看到“By Microsoft”且状态为 “Enabled (Built-in)” 就够了
如果误装了旧插件，建议禁用或卸载，避免 type: "chrome" 这类已弃用配置被意外激活

pwa-chrome 是当前唯一支持现代前端（ESM、Source Map v3、Vite/HMR）的调试类型。用错类型会导致断点变灰、无法停靠、变量显示为空。

VSCode

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

下载

"type": "pwa-chrome" —— 不是 "chrome"，也不是 "firefox"（除非你真用 Firefox）
"url": "http://localhost:5173" —— 必须是真实可访问的 HTTP 地址，不能是 file:///（除非纯静态 HTML 且配了 file 字段）
"port": 9222 —— 这个端口必须和 Chrome 启动时的 --remote-debugging-port=9222 完全一致
如果项目用 Vite，"webRoot": "${workspaceFolder}"；如果是 Webpack + src 目录结构，通常要写成 "webRoot": "${workspaceFolder}/src"

双击桌面图标打开的 Chrome 完全不响应 VS Code 的调试连接请求，会报 Unable to launch browser: "Could not connect to localhost:9222"。这不是插件问题，是远程调试协议根本没开。

先彻底关掉所有 Chrome 进程：taskkill /f /im chrome.exe（Windows）或 pkill -f "Google Chrome"（macOS/Linux）
用命令行启动（端口与 launch.json 中一致）：
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（macOS/Linux）
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\tmp\chrome-debug"（Windows）
--user-data-dir 是强制项，不加 Chrome 会拒绝以调试模式启动
端口被占？换 9223 或 9224，但 launch.json 里的 port 和 url（若含端口）必须同步改

断点变灰 = VS Code 看到了断点，但不知道该映射到哪行源码。常见于构建工具场景，比如 Vite 或 Webpack 输出的 bundle.js 与源码路径不匹配。

打开开发者工具 → Sources 面板，看左侧是否能展开你的源码文件（如 src/App.tsx）。如果只看到 webpack:// 或 app:// 前缀，说明 source map 没正确解析
Vite 项目常用："sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
Webpack 项目可能需要："sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" }
检查生成的 .map 文件里 sources 字段内容，再反推怎么写 sourceMapPathOverrides