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!
