typescript .map

2021-05-08  本文已影响0人  JunChow520

使用TypeScript编写的Node.js应用中,编写的TypeScript会编译成JavaScript,在前端HTML引用的是是经过编译的JavaScript代码,当前端JavaScript报错时实际上与开发源码的TypeScript对应不上,此时应该如何调试呢?

Source Map

Source Map是一个独立的.map文件,采用JSON格式,会分别记录编译前后文件的变化信息。通常会与源码在同一目录下。调试器可以使用Source Map文件来调试TypeScript文件,而非JavaScript文件。

Source Map是一个文件,文件内容保存着转换代码的代码位置和转换前的代码位置的映射信息,当程序报错时可通过它找到开发态代码的位置。因此浏览器通过Source Map使用可以很好地解决源码和编译运行时代码差异的问题。

应用场景

生成映射

TypeScript编译时可附带--sourcemap参数生成.map文件

$ tsc --sourcemap index.ts

使用映射

Chrome浏览器的Developer Tools开发者工具的Setting设置中,确认选中了Enable source maps

Chrome

编译后的JavaScript代码中确保存在:

//# sourceMappingURL=index.js.map

然后可以像调试JavaScript代码一样调试TypeScript代码

上一篇下一篇

猜你喜欢

热点阅读