目 录CONTENT

文章目录

VSCode Chrome Debugger 常用配置详解

Hello!你好!我是村望~!
2023-02-01 / 0 评论 / 0 点赞 / 337 阅读 / 2,132 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

首先,调试配置文件不用自己创建,可以直接点击 Debug 窗口的 create a launch.json file 快速创建:

Jan-31-2023 15-21-04

launch/attach

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

image-20230131152515036

它们只是 request 的配置不同:

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

  • launch 的意思是把 url 对应的网页跑起来,指定调试端口,然后 frontend 自动 attach 到这个端口。
  • 但如果你已经有一个在调试模式跑的浏览器了,那直接连接上就行,这时候就直接 attach。

那么这种情况下,我们想用本地的浏览器直接拿来调试!相当于已经有一个在调试模式跑的浏览器了,那直接连接上就行,这时候就直接 attach。

首先执行下面的一个代码

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/Users/hope/sdy/my-vue-app
  • /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome 这个是mac里面命令行启动应用
  • --remote-debugging-port 这个参数允许我们通过远程的方式连接
  • --user-data-dir 这个参数指定一个独立的目录存放产生的用户数据,在连接时也要设置,否则会失效。[下面有详解!]

window 下面参考执行代码

chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\xxx\xxx"

打开后做两件事情:

  • 一是,打开 http://localhost:9222/json/list 可看到你当前tabs浏览的网站的一些信息,你会发现每个网站都有一个自己的 ws 地址!

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

因为每个页面的调试都是独立的,自然就需要单独的 ws 服务。

image-20230131161658070
  • 二是,打开本地你指定的目录,会发现下面多了很多的文件夹!

image-20230131161717078

然后你创建一个 attach 的 Chrome Debug 配置,去和这个我们用命令启动的浏览器做关联 attach

{
    "configurations": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "chrome",
        "webRoot": "${workspaceFolder}"
    }
    ]
}

此时开启调试,就会看到 VSCode Debugger 和每一个页面的 ws 调试服务建立起了链接:

image-20230131162023989

那么此时我们可以访问我们启动的Vue项目,打个断点,依然可以正常调试了

Jan-31-2023 16-23-35

用这种方式的好处是,可以多个页面一起调试,每个页面都有独立的调试上下文。

user data dir

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

~/Library/Application\ Support/Google/Chrome

比如你打开 Default/Bookmarks 看一下,是不是都是你保存的书签?

open ~/Library/Application\ Support/Google/Chrome/Default/Bookmarks

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

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

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

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

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

image-20230131163835098

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

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

[默认情况下,在临时文件夹中使用单独的用户配置文件启动浏览器。使用此选项可进行替代。设置为 false 以使用默认用户配置文件启动。如果实例已从 userDataDir 运行,则无法启动新的浏览器。] 下图可以看到,当使用默认用户配置文件到时候,浏览器的各种登录记录啊主题都是在的!

userDataDir配置,也可以直接指定一个文件夹!来存储临时的用户配置文件!

"userDataDir": "/Users/hope/sdy/my-vue-app/chrom_config",

image-20230131165326300

还有一些要注意的!

你安装的 React DevTools、Vue DevTools 插件都是在默认用户数据目录的,要是用临时数据目录跑调试,那这些不都没了?

比如你 userDataDir 设置为 true 的时候,React DevTools 插件是没有的,需要再安装:

默认配置

image-20230131165520448

临时配置

那么如果我不想重新安装,但是又想使用原来的插件呢?那就配置为false使用默认配置呗!

但是除了调试用之外,平时也会用到 Chrome 呀,同一个 user data dir 只能跑一个 Chrome 实例的话,那不就冲突了?

这个问题可以用下面的配置解决:

runtimeExecutable

调试网页的 JS,需要先把 Chrome 跑起来,默认跑的是 Google Chrome,其实它还有另外一个版本 Canary:

这是给开发者用的每日构建版,能够快速体验新特性,但是不稳定。

安装完成之后,为了能和正式版配置差不多的话,可以同步一下配置,这样也有同样的插件了!然后 runtimeExecutable 指定为 Canary

{
    "configurations": [
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "chrome",
        "userDataDir": false, // 使用默认配置!
        "runtimeExecutable": "canary", // 运行可以执行的canary启动!
        "url": "http://localhost:5173",
        "webRoot": "${workspaceFolder}"
    }
    ]
}

这样就可以一边快乐的用 canary 调试,还能使用各种插件,一边可以用正式版的google来看文档!而且两边都配置也可以用google账号同步!插件什么的也不用重新安装!

当然,runtimeExecutable 还可以指定用别的浏览器跑:

“canary”、“stable”、“custom” 或 浏览器可执行文件的路径。 Custom 表示自定义包装器、自定义生成或 CHROME_PATH 环境变量。

runtimeArgs

启动 Chrome 的时候,可以指定启动参数,比如每次打开网页都默认调起 Chrome DevTools,就可以加一个 --auto-open-devtools-for-tabs 的启动参数:

Jan-31-2023 17-17-16

想要无痕模式启动,也就是不加载插件,没有登录状态,就可以加一个 --incognito 的启动参数:

1

sourceMapPathOverrides

代码是经过编译打包然后在浏览器运行的,比如这样:

image-20230131173948288

但我们却可以直接调试源码,这是通过 sourcemap 做到的。浏览器中默认是开启的!

image-20230131174013896

当然也可以关掉!设置小齿轮,里面找到源代码映射,把这个钩取消掉就好了!取消后debug的时候就调试的是编译后的代码了!

image-20230131174535431

当你开启源码映射的时候,你可以看到源码的映射文件,以及编译后对应的文件!

Jan-31-2023 17-43-01

在 VSCode 里,这个路径是有对应的文件的,所以就会打开对应文件的编辑器,这样就可以边调试边修改代码。Vscode中控制源码映射的配置项就是 sourceMaps,默认也是开启的!

所以我们之前的一些调试都是走到的源码!

如果你把他关闭,同样你去debug的时候,调试的是编译后的代码!

file

除了启动开发服务器然后连上 url 调试之外,也可以直接指定某个文件,VSCode Debugger 会启动静态服务器提供服务:

image-20230201101648356

打个断点,调试一下!

image-20230201101724202

这些配置倒是很少用,一般我们还是启动 dev server,再调试某个 url 更多一些。

0

评论区