VSCode安装Chrome调试插件_直接在编辑器中调试前端页面技巧-VSCode-PHP中文网

vs code调试前端页面关键在pwa-chrome配置与chrome远程调试端口启用；需用命令行启动chrome并指定--remote-debugging-port，launch.json中type必须为pwa-chrome、url和webroot严格匹配源码路径，否则断点灰色失效。

vscode安装chrome调试插件_直接在编辑器中调试前端页面技巧

VS Code 调试前端页面不靠插件“自动生效”，关键在 pwa-chrome 类型配置 + Chrome 真实启用远程调试端口，缺一不可；装了 Debugger for Chrome 但断点灰色、连不上、跳转错文件，基本都是这两处没对齐。

双击图标打开的 Chrome 完全不响应 VS Code 的连接请求，会报 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 里一致）：
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 对应部分必须同步改

旧教程里写的 "type": "chrome" 在 VS Code 1.80+ 已弃用，继续用会静默失败或无法识别断点。新版统一走 pwa-chrome，它支持现代模块加载、ESM、Source Map v3 等特性。

配置中 request 选 launch（VS Code 自动开 Chrome）或 attach（连已运行的调试 Chrome），二者逻辑完全不同
url 必须是真实可访问的地址，比如 http://localhost:5173；填 file:/// 路径只适用于纯静态 HTML，且要配 file 字段而非 url
webRoot 指向你编辑器里源码的实际根目录，不是构建后的 dist；Vite 项目通常设为 "${workspaceFolder}"，Webpack 项目常需指向 "${workspaceFolder}/src"
若用构建工具，sourceMapPathOverrides 几乎必配，否则断点打在 bundle.js 上，不命中源码；Vite 默认用 "webpack:///./*": "${webRoot}/*"，Webpack 可能是 "webpack:///src/*": "${webRoot}/src/*"，具体看 sourcemap 的 sources 字段内容

VS Code 断点变灰，代表它“看到断点但不知道该映射到哪行源码”。常见原因是 url 地址里的路径和 webRoot 下的文件结构对不上，比如：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

服务跑在 http://localhost:3000/app/index.html，但 webRoot 指向的是 ${workspaceFolder}，而实际 HTML 在 ${workspaceFolder}/app/ 下 → 应该把 webRoot 改成 "${workspaceFolder}/app"
Vite 项目开了 base: "/my-app/"，但 url 写的是 http://localhost:5173 → 必须写成 http://localhost:5173/my-app/，否则 sourcemap 路径解析失败
本地起的是 http-server，默认根路径是 /，但你代码在子目录，webRoot 却没跟着缩进 → 断点必然失效