VSCode直接采用Chrome来进行调试的实现方案

首先安装,如下图。方法已经特别具体，再此不再赘述。

安装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