Debugger for Chrome

作用

代替浏览器的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也一样

更重要的是，调试时，可以直接在代码中看到每一步，比在浏览器中干巴巴的看代码舒服太多了。