一、安装插件

在 Visual Studio Code 中打开扩展面板（快捷键 Ctrl+Shift+X），搜索安装 Debugger for chrome 插件）。

二、配置启动参数

在 Visual Studio Code 按下面的顺序点击就可以打开launch.json 文件。

添加如下配置：

{

"version": "0.2.0",

"configurations": [

{

"name": "ng serve",

"type": "chrome",

"request": "launch",

"url": "http://localhost:4200/#",

"webRoot": "${workspaceRoot}",

"runtimeExecutable":"E:\\Applications\\UserApplications\\Google\\Chrome\\Application\\chrome.exe"

}

]

}

如果修改了chrome地址，可以在 "runtimeExecutable”设置chrome路径。

如果碰到了如下的报错：

则关闭chrome，然后再重新按F5调试就可以了。

三：添加断点，终端运行 ng serve ,Visual Studio Code 中按F5可以正常调试。