如何调试生产Angular2 / Typescript应用程序？

Question

我正在着手使用Angular2和Typescript构建一个新应用程序，之前从未使用过任何一种技术（但是已经单独使用它们，所以我有一些经验）。

我的问题是，如果一个应用程序的调试客户端结束了，那么由于Typescript编译器将你的代码转换为JavaScript，我最终得到了大量的机器生成的代码（有时看起来就像生成的机器一样码）。

Answer 1

Typescript是一个可以为你生成源地图的转换器。打字稿输出与源本身没有太大区别。你总是可以调试js文件。

但是，如果您有一个大型捆绑的js文件，并且想要调试单个ts文件，则需要导出源映射。

Typescript有几个sourceMapping标志。见https://www.typescriptlang.org/docs/handbook/compiler-options.html

所有当前的网络浏览器都可以加载源地图并将断点映射回源文件。

您可以将源地图和来源捆绑为.js文件的一部分。 （注意：这将使js文件更大）

tsc --sourceMap --inlineSources --inlineSourceMaps

或者，如果您的网络服务器可以提供源.ts文件和.map文件，则可以设置

tsc --sourceMap --sourceRoot <root of src>

第二个选项会在结尾处生成带有额外sourceMappingUrl注释的js文件，但浏览器的devtools必须查找.map文件和源文件。

Answer 2

您可以像往常一样将消息和数据记录到浏览器控制台，并使用浏览器的开发人员工具在计算机生成的javascript中设置断点。生成的代码与您的Typescript代码没有明显的区别 - 它是不同的，但您应该能够确定您正在查看的代码片段。希望这有助于