了解 Angular Debug 訊息

以上的 範例 Code 因為沒有實際執行所以 Typescript 是當下找不到錯誤的，要執行過 onAddServer 才會發現的出來

export class AppComponent  {
  servers ;
    onAddServer() {
    this.servers.push('Another Server');
  }

  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}

透漏了三個訊息

1. 在 AppCpmponent 發生錯誤
2. 發生行數是發生在第4行
3. 是因為使用 push而導致的

那為什麼原因是因為 Servers 為 underfined

如何透過瀏覽器 Debug

如何設定 VS Code Debug

• 在 使用 Chrome 替 Angular 除錯 寫了如何使用 Chrome 來進行除錯，
  不過在雙螢幕情況下，這時反而會顯得工作效率低落

• 修改程式 -> 切換瀏覽器開發者工具 -> 設置中斷點除錯 -> 切回 VS Code -> 修改程式 -> …

-應該善用 VS Code 本身的除錯工具，就不需要視窗切來切去了

• 執行步驟：

1. 先安裝 Debugger for Chrome

2. 建立 launch.json

   • 如果之前已建立過，此步驟可省略
   • 如果沒有 launch.json，可輸入指令 ctrl + p → >debuglaunch.json，並選擇 Chrome (VS Code 會自動建立 .vscode 資料夾與 launch.json)

使用第三方套件 Angury Debug

可以點選以下連結 Chrome Extension Angury 進行 Angury 的安裝

1. 透過 Chrome 開啟網站

2. 開啟 Chrome 開發者工具並切換到 Angury 頁籤
   

• Component Tree
  可以看到頁面中 Component 的結構，透過選項也可切換要看到的 Component 資料詳細程度
• Injector Graph 查看 Component 注入的實體有那些

參考

1. 使用 VS Code 替 Angular 除錯
2. microsoft/vscode-chrome-debug
3. Angular #6 Angular Chrome Extension：Angury