VSCode Chrome Debugger

语言

VSCode Chrome 调试配置说明：

  • launch: 调试模式启动浏览器，访问某个 url，然后连上进行调试
  • attach: 连接某个已经在调试模式启动的 url 进行调试
  • userDataDir: user data dir 是保存用户数据的地方，比如浏览历史、cookie 等，一个数据目录只能跑一个 chrome，所以默认会创建临时用户数据目录，想用默认的目录可以把这个配置设为 false
  • runtimeExecutable: 切换调试用的浏览器，可以是 stable、canary 或者自定义的
  • runtimeArgs: 启动浏览器的时候传递的启动参数
  • sourceMapPathOverrides: 对 sourcemap 到的文件路径做一次映射，映射到 VSCode workspace 下的文件，这样调试的文件就可以修改了
  • file: 可以直接指定某个文件，然后启动调试

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "runtimeExecutable": "stable", // 稳定版 canary 每日构建版
      "runtimeArgs": [
        "--auto-open-devtools-for-tabs", // 每次打开网页都默认调起 Chrome DevTools
        "--incognito" // 无痕模式
      ],
      "type": "chrome",
      "url": "http://localhost:3000", // 映射到服务url
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true // false为关闭sourcemap 调试的就是编译后的代码了
    }
  ]
}