準備工具
在 VS Code 中安裝 Debugger for Chrome 插件。
配置 lanch.json
{
// Use IntelliSense to learn about possible 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",
"sourceMaps": true,
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
}
]
}
配置完成後,在 Angular 工程目錄輸入命令 ng serve 啓動項目,然後就可以打斷點調試了。
調試
在 VS Code 中按 F5 進入調試模式,打開 Chrome 刷新頁面,就進入斷點。