VSCode使用Attach方式调试Chrome时断点跳转至只读文件如何解决？

问题修复方案 #

1. 修复Chrome启动读写权限报错 #

你在根目录执行命令时使用相对路径remote-debug-profile作为用户数据目录，当前用户没有根目录的写入权限，才会触发该提示。直接使用绝对路径指定有权限的目录作为调试专用的用户数据目录即可，终端执行命令调整为：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="$HOME/Library/Application Support/Google/Chrome/remote-debug-profile"

如果需要复用已有的Profile 1用户配置，直接将--user-data-dir后的路径替换为"$HOME/Library/Application Support/Google/Chrome/Profile 1"，启动后无需再手动选择用户。

2. 修复断点跳转只读文件问题 #

该问题是VSCode调试器的源文件路径映射规则和项目打包工具生成的sourcemap路径不匹配导致的，调整launch.json配置如下：

{
  "type": "pwa-chrome",
  "request": "attach",
  "name": "Attach Chrome Debugging to Browser for VSCode",
  "port": 9222,
  "url": "http://localhost:8888/",
  "urlFilter": "http://localhost:8888/*",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "resolveSourceMapLocations": [
    "${workspaceFolder}/**",
    "!**/node_modules/**"
  ],
  // 根据项目使用的打包工具选择对应映射规则
  "sourceMapPathOverrides": {
    // webpack项目用以下规则
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///src/*": "${webRoot}/src/*",
    // Vite项目用以下规则，注释掉上面webpack的规则即可
    // "/@fs/*": "/*"
  },
  // 原生无打包工具的项目补充下面这行
  // "enableContentValidation": false
}

配置完成后重启VSCode调试会话即可让断点直接命中本地项目文件。

内容的提问来源于stack exchange，提问作者micomec