代碼調試（debug）是日常開發中必不可少的手段之一，無法進行代碼調試會讓我們痛苦不已，本文主要介紹如何調試TypeScript代碼
很多剛接觸TypeScript的人或許有疑問，我們編寫的TypeScript編譯成JavaScript，在html中引用的是編譯后的JavaScript，這樣代碼報錯的地方就和實際開發ts對應不上，這怎么調試？
我們可以采用Source Map
Source Map是什么
如今前端技術飛速發展，一不留神就落后了。JS變得越來越復雜（壓縮，文件合並，其它語言編譯成Js），導致實際運行的代碼和開發態的代碼不一致，調試困難，於是Source Map出現了。
簡單地說Source Map就是一個文件，里面是轉換代碼的代碼位置和轉換前的代碼位置的映射信息，這樣當前程序報錯時，我們可以找到開發態代碼位置。
如何生成Source Map
TypeScript在編譯時可以同附帶參數生成,命令如下：
tsc --sourcemap Person.ts
執行后，會在同目錄下生成名為Person.js.map文件，這就是Source Map文件,內容如下：
{
"version": 3,
"file": "Person.js",
"sourceRoot": "",
"sources": [
"Person.ts"
],
"names": [],
"mappings": "AAAA;IAGI,gBAAY,IAAW,EAAE,GAAU;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACnB,CAAC;IAED,oBAAG,GAAH;QACI,MAAM,CAAI,IAAI,CAAC,IAAI,YAAO,IAAI,CAAC,GAAG,eAAY,CAAC;IACnD,CAAC;IACL,aAAC;AAAD,CAAC,AAXD,IAWC;AAED,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAElC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC"
}
該文件是一個json格式，分別記錄編譯前文件和編譯后文件信息，至於文件內容究竟是何含義，我們就不深究了，有興趣的可以閱讀阮一峰老師的文章JavaScript Source Map 詳解
Source Map如何使用
目前，暫時只有Chrome瀏覽器支持這個功能。在Developer Tools的Setting設置中，確認選中"Enable source maps"。
同時需要在編譯的js代碼加上以后信息(編譯時已自動加上了)
//# sourceMappingURL=Person.js.map
注意Person.js.map是一個路徑，Source Map文件可以是本地文件，也可以是網絡文件
這樣可以了像調試js代碼一樣調試TypesSript了
