VS Code - Debugger for Chrome調試js

　　最近在自學一些s的內容，用到了vscode來編寫代碼，一直沒有使用過vs調試js的代碼，看到左側有推薦一個插件Debugger for Chrome使用來調試js代碼的，對於vs這種開源，需要安裝各種插件來支撐我們編寫代碼的編輯器，在靈活輕量的同時，插件的配置使用對於剛開始入手的童鞋確實有點難度。下面我簡單介紹一下我是怎么配置使用Debugger for Chrome的。

　　一：在左側擴展中搜索Debugger for Chrome並點擊安裝：

                     

　　二：在自己的html工程目錄下面點擊f5,或者在左側選擇調試按鈕，在上方，選擇下拉按鈕，會有一個添加，選擇chrome

                                                  

　　3：之后會出現laungh.json的配置文件在自己的項目目錄下面

                 

　　4：到這里算是這款插件安裝完成了，但是當你f5調試的時候會發現,打開的google瀏覽器無法找到你自己的html,或者js文件（無法加載），網上好多說是要配置第三步需要配置本地HTTP服務器（IIS）具體的我沒有試，想看的童鞋可以看看這篇博文  ，這里我選擇了一個笨方法，不用修改IIs,知識需要在剛剛的laungh,json文件中加入一些配置，就是直接告訴這個插件在哪里加載你的代碼文件（不過對於不同的代碼文件要調試的話，每次都需要修改一下配置文件），附上最后的配置的結果：

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "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}/jsTest/test1/test1.html"  #每次需要修改這里的文件地址
        }
    ]
}

 　　5：到這里就可以進行調試了，在中選擇  Launch index.html (disable sourcemaps) 調試項，按f5調試，會出現,同時打開goole瀏覽器，點擊，即可進入調試階段

               

 　　6：附上調試過程的圖片：