理查德筆記

程式筆記

2018-08-31

[Angular] VS Code Chrome Debuggers偵錯模式

  • 1491
  • 0

ng serve執行後，讓Angular進入即時偵錯模式

1. Install the Debugger for Chrome in vs code then restart

2. 設中斷點(廢話)

3. 在偵錯畫面中，開啟launch.json (齒輪圖案)修改設定

port記得改得跟ng serve --port=XXXX 一樣

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*"
            }
        }
    ]
}

4. 按F5進入偵錯模式囉！

 

另外一個好用套件：Augury