.VSCode Chrome Debugger配置详解

首先，调试配置文件不用自己创建，可以直接点击 Debug 窗口的

create a launch.json file

快速创建：

launch/attach link

创建 Chrome Debug 配置有两种方式：launch 和 attach：

它们只是 request 的配置不同：

我们知道，调试就是把浏览器跑起来，访问目标网页，这时候会有一个 ws 的调试服务，我们用 frontend 的 ws 客户端连接上这个 ws 服务，就可以进行调试了。

VSCode 的 Debugger 会多一层适配器协议的转换，但是原理差不多。

launch 的意思是把 url 对应的网页跑起来，指定调试端口，然后 frontend 自动 attach 到这个端口。

但如果你已经有一个在调试模式跑的浏览器了，那直接连接上就行，这时候就直接 attach。

比如我们手动把 Chrome 跑起来，指定调试端口 remote-debugging-port 为 9222，指定用户数据保存目录 user-data-dir 为你自己创建一个目录。

在命令行执行下面的命令：

Chrome 跑起来之后，你可以打开几个网页，比如百度、掘金，然后你访问 localhost:9222/json，这时候你就会发现所有的 ws 服务的地址了：

为什么每个页面有单独的 ws 服务呢？

这个很正常呀，每个页面的调试都是独立的，自然就需要单独的 ws 服务。

然后你创建一个 attach 的 Chrome Debug 配置：

点击启动，就会看到 VSCode Debugger 和每一个页面的 ws 调试服务建立起了链接：

比如访问之前的 React 项目，就可以进行调试了：

可以多个页面一起调试，每个页面都有独立的调试上下文。

userDataDir link

不知道你有没有注意到刚才手动启动 Chrome 的时候，除了指定调试端口 remote-debugging-port 外，还指定了用户数据目录 user-data-dir。

为什么要指定这个呢？

user data dir 是保存用户数据的地方，比如你的浏览记录、cookies、插件、书签、网站的数据等等，在 macOS 下是保存在这个位置：

~/Library/Application\ Support/Google/Chrome

你还可以删掉 Deault/Cookies，之后再访问之前登陆过的网站试一下，是不是都需要登录了？

这就是用户数据目录的作用。

那为什么启动 Chrome 要手动指定这个呢？都用默认的不行么？

用户数据目录有个特点，就是只能被一个 Chrome 实例所访问，如果你之前启动了 Chrome 用了这个默认的 user data dir，那就不能再启动一个 Chrome 实例用它了。

如果用户数据目录已经跑了一个 Chrome 实例，再跑一个候会报这样的错误：

所以我们用调试模式启动 Chrome 的时候，需要单独指定一下 user data dir 的位置。或者你也把之前的 Chrome 实例关掉，这样才能用默认的。

launch 的配置项里也有 userDataDir 的配置：

默认是 true，代表创建一个临时目录来保存用户数据。

你也可以设为 false，使用默认 user data dir 启动 chrome。

这样的好处就是登录状态、历史记录啥的都有：

把 userDataDir 设置为 true 就每次都需要登录了：

你也可以指定一个自定义的路径，这样用户数据就会保存在那个目录下：