如何在VS CODE除錯Angular

cipchk發表於2019-02-16
除錯Angular

Chrome Dev Tools 絕對是目前最爽的 JavaScript 除錯工具之一，一方面可以通過在程式碼 debugger 或 直接在 Sources 中新增斷點，並且可以直接進入 Typescript 原始碼，真的無可挑剔。

然……

我們一般在開發Angular，首先需要在CMD終端 （或VSCODE TERMINAL）啟動 ng serve，後開啟瀏覽器，然後開啟 Dev Tools，進入斷點，此時再回過頭VS CODE修改程式碼；而其實我們在開發過程中需要一直重複以下流程：

修改程式碼 > 開啟Dev Tools > 設定斷點 > 除錯 > 回到VSCODE

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

其實……

我們可以簡化這一過程，只需要把除錯在VSCODE裡面完成，這樣當定位錯誤的時候可以直接修改程式碼。

怎麼做？

兩步驟即可。

1、安裝 Debugger for Chrome

直接在市場中找就行了。

2、建立 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 新增專案瀏覽地址即可。

3、啟動 ng serve

當然這裡最好是在 VSCODE TERMINAL 啟動 ng serve 了。

4、除錯

在VSCODE按F5進入除錯狀態，最後開啟 Chrome 重新整理頁面，會直接在 VSCODE 進入斷點。

結論

這樣你會發現，其實我只開啟兩個視窗，一是VS CODE、一是Chrome，這樣如果你是使用多螢幕或window10的多桌面的話，簡直可以浪一把。

而且當我在除錯時發現錯誤，可以直接在VSCODE中修改程式碼，儲存後由於 Angular Cli 自動重新整理，並同時進入修改程式碼後的DEBUG。

爽……

happy coding!

相關文章