如何在VS CODE調試Angular

Chrome Dev Tools 絕對是目前最爽的 JavaScript 調試工具之一，一方面能夠經過在代碼 debugger 或 直接在 Sources 中添加斷點，而且能夠直接進入 Typescript 源代碼，真的無可挑剔。

然……

咱們通常在開發Angular，首先須要在CMD終端 （或VSCODE TERMINAL）啓動 ng serve，後打開瀏覽器，而後打開 Dev Tools，進入斷點，此時再回過頭VS CODE修改代碼；而其實咱們在開發過程當中須要一直重複如下流程：

修改代碼 > 打開Dev Tools > 設置斷點 > 調試 > 回到VSCODE

當定位到錯誤老是須要一直在 Chrome 與 VSCODE 切換。

其實……

咱們能夠簡化這一過程，只須要把調試在VSCODE裏面完成，這樣當定位錯誤的時候能夠直接修改代碼。

怎麼作？

兩步驟便可。

一、安裝 Debugger for Chrome

直接在市場中找就好了。

二、建立 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}"
        }
    ]
}

並無什麼特別是的，只須要注意 url 添加項目瀏覽地址便可。

三、啓動 ng serve

固然這裏最好是在 VSCODE TERMINAL 啓動 ng serve 了。

四、調試

在VSCODE按F5進入調試狀態，最後打開 Chrome 刷新頁面，會直接在 VSCODE 進入斷點。

結論

這樣你會發現，其實我只打開兩個窗口，一是VS CODE、一是Chrome，這樣若是你是使用多屏幕或window10的多桌面的話，簡直能夠浪一把。

並且當我在調試時發現錯誤，能夠直接在VSCODE中修改代碼，保存後因爲 Angular Cli 自動刷新，並同時進入修改代碼後的DEBUG。

爽……

happy coding!