調試 Angular 項目

Question

來自 asp.net webforms/mvc/visual studio 背景。

我使用 cli 創建了一個新的 angular 項目（visual studio 代碼）。 對 app.component.ts 進行了一些更改（但這並不重要）。 渲染頁面絕對是空的。

我想知道如何調試並知道出了什么問題？

終端展示

webpack: 編譯成功。 webpack：正在編譯... 日期：2018-02-26T01:29:02.482Z - 哈希：8bdb62ab120b22cea391 - 時間：1415ms 4 個未更改的塊 chunk {main} main.bundle.js (main) 34.9 kB [initial] [rendered]

呈現的 Html 絕對是空白的。

我希望終端會指出問題，但顯然沒有。 此外，chrome 的開發者工具控制台也沒有顯示錯誤。

首先要檢查的幾件事是什么？

Answer 1

Angular 有多種調試方式

1) 您可以在 Chrome 瀏覽器中使用 Sources 調試打字稿文件。

步驟：a) 打開 tsconfig.json 文件

b) 將 SourceMap 標志更改為 true。

c) 打開源代碼並在Chrome 開發人員窗口的 .ts 文件中放置斷點。

2) Chrome 調試器

在 Visual Studio Code 中為 Chrome 安裝調試器擴展。