作用

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

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

使用

安装插件

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

配置

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

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

launch.json配置在这里插入图片描述 .ignore配置关于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}/*"
            }
        }
    ]
}

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

必填参数

name：也就是当前配置的名称，将来可以在控制台选择的名字,如图: 在这里插入图片描述 type：是调试工具的类型，是什么就填什么，比如php就填php，go就填go，我们这里因为借助chrome的控制台调试，所以填chrome

request：这里官方一共提供了两个类型，分别是launch和attach。launch是同时启动项目，attach不会启动项目

可选参数

url：网络服务地址（其实就是你项目启动地址） webRoot：开发目录，个人理解也就是debug需要读取到的入口文件，一般都是src

file：如果不使用网络服务地址，还可以使用file，填写文件路径 breakOnLoad：简单的找了一下资料，不知道是什么。字面理解吧。 sourceMapPathOverrides：同上

比较详细的配置参数，可以参考这个博客

启动项目

当参数都配置好之后，按放f5启动项目这个时候你可以这样打断点了在这里插入图片描述同时控制台也可以使用了调试工具栏与chrome也一样更重要的是，调试时，可以直接在代码中看到每一步，比在浏览器中干巴巴的看代码舒服太多了。