如何解决VS Code配合Chrome Attach调试时断点触发在只读文件而非实际文件的问题

阿华AIGC实验室

2026-4-30

解决VSCode Attach模式调试Chrome时断点触发在只读文件的问题

我之前遇到过完全类似的调试困扰，核心原因基本都是源映射（Source Maps）未正确关联VSCode项目文件，或是Chrome调试实例的路径与VSCode工作区路径没有对齐。结合你的环境和已尝试的操作，下面是针对性的解决方案：

一、先修复Chrome调试实例的启动参数

你之前在项目目录运行Chrome命令导致大量文件写入，是因为--user-data-dir用了相对路径，建议改用绝对路径的独立调试配置目录，既不会污染项目，也能避免和默认Chrome实例的配置冲突：

先彻底关闭所有Chrome进程：
```
killall Google\ Chrome
```
启动干净的Chrome调试实例：
```
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile --no-first-run
```
- --no-first-run会跳过首次启动的配置向导，直接进入干净的调试窗口
- /tmp/chrome-debug-profile是临时目录，调试结束后可以安全删除，不会影响你的日常Chrome配置

二、修正VSCode `launch.json` 核心配置

重点调整webRoot和sourceMapPathOverrides，确保源映射能精准映射到你的本地项目文件：

{
  "type": "pwa-chrome",
  "request": "attach",
  "name": "Attach Chrome Debugging",
  "port": 9222,
  "urlFilter": "http://localhost:8888/*",
  "webRoot": "${workspaceFolder}/src", // 指向你的项目源码根目录，根据实际结构调整
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    // Webpack项目添加这条映射
    "webpack:///./src/*": "${webRoot}/*",
    // 通用映射规则，覆盖Chrome中加载的源码路径
    "http://localhost:8888/src/*": "${webRoot}/*"
  }
}

配置细节说明：

webRoot：必须准确指向你的项目源码所在目录（比如src文件夹），${workspaceFolder}对应VSCode当前打开的工作区根目录
sourceMapPathOverrides：把Chrome调试器中显示的源文件路径，直接映射到VSCode本地的项目文件路径。如果用Vite、Parcel等其他构建工具，可以根据Chrome开发者工具Sources面板里的实际源码路径调整这条规则
sourceMaps：必须设为true，这是VSCode能解析源映射的前提

三、验证项目是否正确生成源映射

如果源映射没生成，再怎么调配置都没用：

打开Chrome开发者工具（F12），切换到Sources面板
查看是否能找到webpack://或你的项目源码目录（而非编译后的bundle文件）
如果看不到源码目录，需要在构建工具中开启源映射：
- Webpack：在配置中设置devtool: 'source-map'或'inline-source-map'
- Vite：默认已开启，确保vite.config.js中server.sourcemap为true