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!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!