- 安装Debugger for Chrome扩展
在VS Code的扩展中搜索Debugger for Chrome，安装后重启。 - 添加配置文件
在“调试”菜单中，点击“添加配置”，即可在当前项目文件夹下添加.vscode/launch.json文件，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
注意其中的url，要修改为你的项目使用的相应地址和端口。
- 启动项目 npm start
-
调试
在VS Code按F5进入调试状态，最后打开 Chrome 刷新页面，在VS Code编辑器中的Typescript代码设置断点，在Chrome中操作时，运行到断点代码时，中断。
下图是项目运行过程中调试的画面，请注意“变量”面板中可以看到CouterComponent以及其中counter变量的值，无需使用console.log往Chrome输出变量了。当你有一堆变量需要观察的时候，将节省你许多的时间。
单步调试
