Chrome Dev Tools 可以調試js程序，但是可能需要和源碼之間來回切換。

如果是使用VS CODE來開發Angular，可以直接在VS CODE中調試。

按照如下的步驟即可：

第一步， 安裝Debugger for Chrome。 同時可以選擇安裝中文插件，可以將IDE的菜單漢化

第二步， 項目根目錄下如果沒有自動創建.vscode/launch.json，可以在項目根目錄下手動創建 .vscode/launch.json，內容如下：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    
 
// Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome with ng serve
 
",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

${workspaceRoot}可以寫成項目的根目錄。例如D:\temp\angluartest。 VS CODE同時引入多個工程的代碼時，${workspaceRoot}要寫成對應工程的根目錄。

第三步，啟動工程，npm start。 在VS CODE按F5進入調試狀態，最後打開 Chrome 輸入調試工程對應的url，會直接在 VS CODE 中進入斷點。

在VS CODE中調試Angular代碼