一：在左側擴充套件中搜索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:3000",
          "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}/index.html"
      }
  ]
}
 

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

　　6：附上除錯過程的圖片：