前言

很多小夥伴說用了打包工具(Webpack)之後，斷點除錯相當痛苦；
常規的方式無非是debugger,console.log()大法；
但是，vscode這貨天生支援debug功能，不用白不用，今天我就說說怎麼調教angular-cli;

---

題外話（號外）

最近vscode又更新了。。最新的版本是1.10.2;不詳細解釋，點一下;

1. 引入了minimap(這個好啊)。在配置檔案裡面啟用"editor.minimap.enabled": true;當然還有一些額外的小地圖引數
2. 內建JSDOC功能，又可以少掉一個外掛, **觸發
3. 複製內容保持格式化，逼格滿滿，適用於複製到文件什麼的
4. 目錄樹引入了命令控制，可以自定義繫結按鍵啦，比如新建目錄和檔案
5. Debug功能強化,支援列斷點，溜的飛起額
6. 某些程式語言預設執行的配置檔案設定
7. terminal輸出的連結可以直接點選訪問啦
8. HTML DOM的快速跳轉
9. Debug的配置項更多了，天生支援gulp這些了。這些需要自行去研究文件哈

剩下的亮點自行去看發行日志啦.....

---

Vs Code Debug(Ctrl + Shift +D)

再來一次截圖解釋，怪我咯，不然不好說。。。

部分快捷鍵

1. 繼續(F5)
2. 單步跳過(F10)
3. 單步除錯(F11)
4. 單步跳出(Shift + F11)
5. 重啟(Ctrl + Shift + F5 )
6. 停止/結束(Shift + F5)

安裝外掛

Debugger for Chrome : Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

簡言之：就是讓你的程式碼在chrome上除錯，為什麼vscode不整合這個，可能控制體積大小什麼的。。

記得ng serve要先行啟動,除錯是除錯，不包括引導angular-cli的啟動;

配置檔案很簡單：

{
  "version": "0.2.0",
  "configurations": [{
    "name": "LaunchChrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/.vscode/chrome"
  }]
}複製程式碼

配置解釋

• version : 你定義這個配置檔案的版本，預設是0.2.0，生成的時候
• configuration：配置域
• name：配置檔案的名字，比如你可以叫做Debug Angular-cli
• type：除錯的型別，vscode天生支援node,比如go,php,chrome這些就依賴外掛啦
• request : 配置檔案的請求型別，有launch和attach兩種，具體看官方文件
• url:這個是chrome外掛帶的，指定訪問的連結
• webRoot：也是chrome外掛帶的，指定根目錄或者執行檔案
• ${workspaceRoot}:就是你開啟vscode讀取的專案目錄
• sourceMaps:預設是啟用的，對於打包的除錯，小夥伴們必須開啟
• userDataDir：臨時目錄,專門儲存除錯過程產生的東西

---

啟動除錯

1. 正確的情況下就會彈窗一個新的chrome頁面，

2. 打斷點很簡單，就直接在你需要斷點的頁面，點行號靠左的地方，有個小紅點的地方，點選出來紅色就是打上了(小紅點再點選一次就是取消)，如圖：
   

   

3. 開啟相應的頁面，執行到響應的程式碼塊就會觸發debug了。。然後vscode就可以看到你想瞅瞅的資料了。。除錯過程（單步什麼的）,對應的本地檔案會顯示資料變動在你的

---

總結

VS Code的Debug功能相當好用，若是想載入程式啟動再開啟chrome這種也可以實現，就是需要寫的配置檔案比較繁瑣，很花時間;

除了天生支援node內建debug,以下的都需要藉助外掛才可以

1. C#
2. Python
3. Chrome
4. C/C++
5. Go