TypeScript入门 2--代码调试

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

参考文章

JavaScript Source Map 详解-阮一峰

巴特西

TypeScript入门 2--代码调试

Source Map是什么

如何生成Source Map

Source Map如何使用

参考文章

最新文章

热门文章