首先安裝,如下圖。方法已經(jīng)特別具體，再此不再贅述。

安裝Debugger for Chrom插件

3.2 在自己的html工程目錄下面點(diǎn)擊f5,或者在左側(cè)選擇調(diào)試按鈕

點(diǎn)擊調(diào)試按鈕

啟動(dòng)調(diào)試

但是直接打開的chrome將會(huì)出現(xiàn)如下錯(cuò)誤

瀏覽器報(bào)錯(cuò)

3.3.解決以上問題

首先在彈出來的launch.json中添加以下內(nèi)容

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "啟動(dòng) 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 然后在調(diào)試頁面中選擇對應(yīng)的scheme

，在上方

，選擇下拉按鈕，會(huì)有一個(gè)添加，選擇chrome