- 安裝Debugger for Chrome擴展
在VS Code的擴展中搜索Debugger for Chrome蒸辆，安裝后重啟征炼。 - 添加配置文件
在“調(diào)試”菜單中，點擊“添加配置”躬贡，即可在當前項目文件夾下添加.vscode/launch.json文件谆奥，內(nèi)容如下：
{
"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，要修改為你的項目使用的相應(yīng)地址和端口拂玻。
- 啟動項目 npm start
-
調(diào)試
在VS Code按F5進入調(diào)試狀態(tài)酸些，最后打開 Chrome 刷新頁面，在VS Code編輯器中的Typescript代碼設(shè)置斷點纺讲，在Chrome中操作時擂仍，運行到斷點代碼時，中斷熬甚。
下圖是項目運行過程中調(diào)試的畫面逢渔，請注意“變量”面板中可以看到CouterComponent以及其中counter變量的值，無需使用console.log往Chrome輸出變量了乡括。當你有一堆變量需要觀察的時候肃廓，將節(jié)省你許多的時間。
單步調(diào)試
