今天重装了vsCode，重新安装了插件，配置这个调试插件时花了一个小时…好菜，因为我按网上教程配置了出现断点灰色，调试不了的问题，所以我找解决方法…现在半夜两点了，我要秃了…才刚入行哈哈哈哈哈哈
进入正题：
Debugger for Chrome这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。
1.安装Debugger for Chromec插件
2.配置launch.json文件
这个文件怎么打开？
安装了插件右边会多出调试按钮，点击，然后再点击左上角的 齿轮， 就自动跳出xxx.json文件了
11/30号更新：
也是点击调式按钮，然后回提示选择工作文件夹，这里选你最外的根目录吧，就会自动创建一个xxx.json文件，不一定是launch.json,然后配置就行了
需要注意，这种配置要有一个**总根目录，**不然会报"多文件工作区的错误"
比如下面，两个根目录，配置"webRoot": "${workspaceFolder}"就会报错
所以，可以统一放一个根目录下，创建xx.json配置文件时选择根目录就行。
这里配置我看了好多…最终配置成功如下
也就是配置下面两个，一个配置html里面的js, 一个单独调试js文件的，这里没带注释，方便需要的道友复制，注释具体看下面完整文件
{
"type": "chrome", // html里面的js
"request": "launch",
"name": "LaunchChrome",
"file": "${file}",
"webRoot": "${workspaceFolder}",
"sourceMaps": false,
"userDataDir": "${workspaceFolder}/.vscode/chrome"
},
{
"type": "node", // 单独调试js文件
"request": "launch",
"name": "本地js逆向调试",
"program": "${file}"
}
我的全部launch.json文件如下，带注释
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "browser-preview",
"name": "Browser Preview: Attach",
"request": "attach"
},
{
"type": "chrome", // 谷歌--调试html里面的js
"request": "launch", // 模式launch模式：由 vscode 来启动一个独立的具有 debug 模式的 attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式）
"name": "LaunchChrome", // 名字自个起个好听的吧，
// "url": "http://localhost/", // 本地http服务路径 ,比如用apache服务，这里我有，但是懒得开，所以我配置文件路径好了
"file": "${file}", // 当前打开的文件， 没开本地http服务就配置本地文件路径打开
"webRoot": "${workspaceFolder}", // 也是chrome插件带的，指定根目录或者执行文件,${workspaceRoot}:就是你打开vscode读取的项目目录
"sourceMaps": false, // 设置false,我一开始设置true，断点灰色，调试不了
"userDataDir": "${workspaceFolder}/.vscode/chrome", // 临时目录,专门保存调试过程产生的东西,这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器
},
{
"type": "node", // 单独调试js文件
"request": "launch",
"name": "本地js逆向调试",
"program": "${file}"
},
{
// 这个不用管，是其他插件配置
"type": "browser-preview",
"request": "launch",
"name": "Browser Preview: Launch",
"url": "http://localhost:3000",
}
]
}
界面介绍：
配置了这两个就可以调试了（偷张图，来源https://blog.csdn.net/weixin_43411585/article/details/108798737）
调试测试：
1.记得左上角选择调试用的配置，也就是上面设置的名字，这里调试html的js，使用我选择LaunchChrome,然后点击绿色的三角开始，或者f5
2.正常出现调试断点行，就代表成功了
3.这里配置调试时打开一个页面的，不过打开后自动最小化了
调试js文件：
最后，对配置信息感兴趣看这里说明吧…(复制的哈哈哈…)
1.两种模式
launch模式：由 vscode 来启动一个独立的具有 debug 模式的程序
attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式）
2.字段解释
version : 你定义这个配置文件的版本，生成的时候默认是0.2.0
configuration：配置域
name：配置文件的名字，可以自己起
type：调试的类型，node是vscode本身就支持，其他就需要下载插件了
request : 配置文件的请求类型，有launch和attach两种，launch是需要服务器的需要配置url，这里我就用的它，attach就比较麻烦了，因为配置launch也能用，所以我就没有配置attach了
url:这个是chrome插件带的，指定访问的链接，到这里我觉得就个缺点了，url只能配置死链接，就算用预定义变量也不能做到多项目自动识别要打开的HTML，可能是我没有发现其他的预定义变量，如果有大神知道，欢迎在评论里留言
webRoot：也是chrome插件带的，指定根目录或者执行文件
${workspaceRoot}:就是你打开vscode读取的项目目录
sourceMaps:默认是启用的，对于打包的调试，大神们就必须开启了
userDataDir：临时目录,专门保存调试过程产生的东西，这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器
launch.json中有很多属性可以设置, 通过智能提示查看有那些属性可以设置, 如果要查看属性的具体含义, 可以把鼠标悬停在属性上面, 会属性的使用说明.
在launch.json中会使用到一些预定变量, 这些变量的具体含义如下：
${workspaceRoot}：VSCode中打开文件夹的路径
${workspaceRootFolderName}：VSCode中打开文件夹的路径, 但不包含"/"
${file} ：当前打开的文件
${relativeFile}：当前打开的文件,相对于workspaceRoot
${fileBasename} ：当前打开文件的文件名, 不含扩展名
${fileDirname} ：当前打开文件的目录名
${fileExtname}：当前打开文件的扩展名
${cwd} ：当前启动时的工作目录
终于搞定了…半夜2.30，不行了不行了，睡了睡了，写的不好多多交流…