如何調試生產Angular2/Typescript應用程序？

Question

我正在着手使用Angular2和Typescript構建一個新應用程序，之前從未使用過任何一種技術（但單獨使用它們，所以我有一些經驗）。

我的問題是如何做應用程序的一個調試客戶端因爲打字稿編譯器轉換你的代碼，JavaScript和我結束了一噸的機器生成的代碼（這有時看起來像機器生成的代碼）。

Answer 1

您可以像往常一樣將消息和數據記錄到瀏覽器控制檯，並使用瀏覽器的開發人員工具在機器生成的javascript中設置斷點。生成的代碼與您的Typescript代碼沒有顯着區別 - 它不同，但您應該能夠確定您正在查看的代碼片段。希望這可以幫助

Answer 2

Typescript是一個可以爲你生成源映射的轉譯器。 Typescript輸出與源本身並沒有太大的不同。你總是可以調試js文件。

但是，如果你有一個很大的捆綁js文件，並且想要調試單個的ts文件，你需要導出源映射。

Typescript有一對sourceMapping標誌。請參閱https://www.typescriptlang.org/docs/handbook/compiler-options.html

所有當前Web瀏覽器都可以將源映射和映射斷點加載回源文件。

您可以將源地圖和源文件打包爲.js文件的一部分。 （注：這將使得JS文件大了很多）

tsc --sourceMap --inlineSources --inlineSourceMaps

另外，如果你的Web服務器可以服務於源.ts文件和.map文件，您可以設置

tsc --sourceMap --sourceRoot <root of src>

的第二個選項導致js文件在最後帶有額外的sourceMappingUrl註釋，但瀏覽器的devtools必須查找.map文件和源文件。