代码调试（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了