首先安装,如下图。方法已经特别具体，再此不再赘述。
安装Debugger for Chrom插件
3.2 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮
点击调试按钮
启动调试
但是直接打开的chrome将会出现如下错误
浏览器报错
3.3.解决以上问题
首先在弹出来的launch.json中添加以下内容
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 然后在调试页面中选择对应的scheme
，在上方
，选择下拉按钮，会有一个添加，选择chrome
