如何调试Angular2/Typescript产品应用?

How does one debug a production Angular2/Typescript app?

本文关键字：Typescript 产品应用 Angular2 何调试 调试      更新时间：2023-09-26

我正着手使用Angular2和Typescript构建一个新的应用程序，以前从来没有一起使用过这两种技术(但是分开使用过，所以我有一些经验)。

我的问题是，如果Typescript编译器将您的代码转换为JavaScript，那么我最终会得到大量机器生成的代码(有时看起来像机器生成的代码)，那么如何调试应用程序的客户端呢?

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文件和源文件。

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

相关文章：