如何调试生产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文件和源文件。