Chrome Dev Tools 絕對(duì)是目前最爽的 JavaScript 調(diào)試工具之一，一方面可以通過在代碼 debugger 或 直接在 Sources 中添加斷點(diǎn)，并且可以直接進(jìn)入 Typescript 源代碼，真的無可挑剔。

然……

我們一般在開發(fā)Angular，首先需要在CMD終端 （或VSCODE TERMINAL）啟動(dòng) ng serve，后打開瀏覽器，然后打開 Dev Tools，進(jìn)入斷點(diǎn)，此時(shí)再回過頭VS CODE修改代碼；而其實(shí)我們?cè)陂_發(fā)過程中需要一直重復(fù)以下流程：

修改代碼 > 打開Dev Tools > 設(shè)置斷點(diǎn) > 調(diào)試 > 回到VSCODE

當(dāng)定位到錯(cuò)誤總是需要一直在 Chrome 與 VSCODE 切換。

其實(shí)……

我們可以簡(jiǎn)化這一過程，只需要把調(diào)試在VSCODE里面完成，這樣當(dāng)定位錯(cuò)誤的時(shí)候可以直接修改代碼。

怎么做？

兩步驟即可。

1、安裝 Debugger for Chrome

直接在市場(chǎng)中找就行了。

2、創(chuàng)建 launch.json

在項(xiàng)目根目錄下創(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 添加項(xiàng)目瀏覽地址即可。

3、啟動(dòng) ng serve

當(dāng)然這里最好是在 VSCODE TERMINAL 啟動(dòng) ng serve 了。

4、調(diào)試

在VSCODE按F5進(jìn)入調(diào)試狀態(tài)，最后打開 Chrome 刷新頁(yè)面，會(huì)直接在 VSCODE 進(jìn)入斷點(diǎn)。

結(jié)論

這樣你會(huì)發(fā)現(xiàn)，其實(shí)我只打開兩個(gè)窗口，一是VS CODE、一是Chrome，這樣如果你是使用多屏幕或window10的多桌面的話，簡(jiǎn)直可以浪一把。

而且當(dāng)我在調(diào)試時(shí)發(fā)現(xiàn)錯(cuò)誤，可以直接在VSCODE中修改代碼，保存后由于 Angular Cli 自動(dòng)刷新，并同時(shí)進(jìn)入修改代碼后的DEBUG。

爽……

happy coding!