步驟一：確保環境
確保將谷歌瀏覽器安裝在其預設位置。

確保在VS Code中安裝了外掛：Debugger for Chrome

使用npm在全域性範圍內安裝了angular/cli ，並且版本大於1.3
（我們第一節課中就講過這個了，你也可以在確認一下。Windows使用者快捷鍵win+r ，輸入 ng -v）

使用angular/cli建立新的專案
ng new oniplan-ng
第一節課中我們已經建立過了。所以我們只要cd到專案目錄，然後執行code . 就可以了。
不喜歡使用命名行的，可以先執行VS Code，然後左上角檔案-開啟資料夾 選中專案資料夾。

步驟二：配置 launch.json 檔案
點選調製-設定-Chrome，如圖：

使用以下配置替換掉launch.json檔案的內容

{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceRoot}"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
}
]
}

步驟三：開始除錯
在src/app/app.component.ts中設定斷點。

在根資料夾上開啟終端並使用angular/cli開啟本地服務
在狀態列中選擇檢視-整合終端（也可以使用快捷鍵ctrl+` 數字1左邊那個鍵，不是引號）

執行npm start

然後進入除錯介面，點選綠色按鈕，啟動除錯。

會自動開啟谷歌瀏覽器視窗，然後再按F5重新整理一下，就能進入斷點了。

除錯的時候的快捷鍵F10啥的都可以使用。

步驟四：除錯單元測試
在單元測試src/app/app.component.spec.ts中設定斷點

如果是新專案的話，設定斷點的時候，可能會提示，已自動忽略斷點，什麼原始檔對映啥的，可以不理會。下一步執行就會自動生成原始檔。

在終端中執行 npm run test
剛才已經執行著npm start了，可以使用快捷鍵ctrl+c停掉當前的服務，再執行npm run test

然後進入除錯介面，選擇ng test ，點選綠色按鈕，啟動單元測試除錯。

步驟五：除錯End-to-end測試
接下來我們簡要的說明一下端對端測試的除錯。
- 首先先停掉終端裡的服務ctrl+c，然後執行 ng server。
- 在除錯裡面選擇ng e2e，點選綠色按鈕。

- 重新整理一下，檢視控制檯

英文原文連結：https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
---------------------
作者：陳小聰-小虎Oni
來源：CSDN
原文：https://blog.csdn.net/onil_chen/article/details/77964095
版權宣告：本文為博主原創文章，轉載請附上博文連結！