Chrome Dev Tools 絕對是目前最爽的 JavaScript 調(diào)試工具之一，一方面可以通過在代碼 debugger 或 直接在 Sources 中添加斷點忆植，并且可以直接進入 Typescript 源代碼，真的無可挑剔谒臼。
然……
我們一般在開發(fā)Angular朝刊，首先需要在CMD終端 （或VSCODE TERMINAL）啟動 ng serve，后打開瀏覽器屋休，然后打開 Dev Tools，進入斷點备韧，此時再回過頭VS CODE修改代碼劫樟；而其實我們在開發(fā)過程中需要一直重復以下流程：
修改代碼 > 打開Dev Tools > 設(shè)置斷點 > 調(diào)試 > 回到VSCODE
當定位到錯誤總是需要一直在 Chrome 與 VSCODE 切換。
其實……
我們可以簡化這一過程织堂，只需要把調(diào)試在VSCODE里面完成叠艳，這樣當定位錯誤的時候可以直接修改代碼。
怎么做易阳？
兩步驟即可附较。
1、安裝 Debugger for Chrome
直接在市場中找就行了潦俺。
2拒课、創(chuàng)建 launch.json
在項目根目錄下創(chuàng)建 .vscode/launch.json，內(nèi)容如下：
{
// 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卢鹦、調(diào)試
在VSCODE按F5進入調(diào)試狀態(tài)，最后打開 Chrome 刷新頁面劝堪，會直接在 VSCODE 進入斷點冀自。
結(jié)論
這樣你會發(fā)現(xiàn)，其實我只打開兩個窗口秒啦，一是VS CODE熬粗、一是Chrome，這樣如果你是使用多屏幕或window10的多桌面的話余境，簡直可以浪一把荐糜。
而且當我在調(diào)試時發(fā)現(xiàn)錯誤，可以直接在VSCODE中修改代碼，保存后由于 Angular Cli 自動刷新暴氏，并同時進入修改代碼后的DEBUG延塑。
爽……
happy coding!
