chrome remote debugging port 有哪些参数 debugger for chrome 作用

转载

误会一场 2024-04-11 12:35:16

文章标签 chrome json 调试工具 文章分类 机器学习人工智能

作用

代替浏览器的console面板对代码进行debug。当然也可以当作浏览器的console面板使用，在调试时，整个代码板块作为跟踪debug的资源面板来使用。单单看表面的意思可能平平无奇，推荐没有用过的小伙伴体验一下。

由于自己也只是才接触这个插件，所以根据自己成功配置的方式，以及理解在这里记录一下，如果有错误，也请评论出来，一起探讨学习。

使用

安装插件

vscode插件商店中搜索Debugger for Chrome，安装

配置

要使用这个插件，还需要进行一点简单的配置

1、首先找到.vscode文件夹（这个文件夹一般承载全局的配置文件），如果项目中没有这个文件夹，可以自己在项目根目录创建一下，并在.vscode文件夹中创建launc.json文件。这里记得在.ignore里面也配置一下。

launch.json配置

chrome remote debugging port 有哪些参数 debugger for chrome 作用_json

.ignore配置

chrome remote debugging port 有哪些参数 debugger for chrome 作用_调试工具_02

关于launch.json的配置在这里简单的介绍一下

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:1234",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

根据我自己的配置，对里面的几个配置项解释一下，从必填与非必填的维度，简单的分成两类