Chrome开发者工具不显示.js文件

Question

我正在开发一个小型的Angular应用程序，并尝试在Chrome DevTools中进行调试。但是，我只能看到.ts文件。

如何查看和调试.ts文件编译成的.js文件？

我的DevTools设置中的“启用JavaScript源映射”选项已打开。

- Sofia Bo

---

有什么特别的原因需要这样做吗？ - Hugo Noro

你可以查看这个链接：https://stackoverflow.com/a/50290220/5146848 - Sifat Haque

这个回答解决了你的问题吗？Chrome源代码未显示由TypeScript生成且具有源映射的文件。 - Reactgular

你是否以JIT模式构建源代码？这种模式不会对你的代码进行编码，并允许你通过浏览器进行调试。 - Tran Son Hoang

@SofiaBo 只需正常构建源代码，使用 ng build 命令即可，或者您可以打开 angular.json 文件，并将属性 aot 设置为 false 以进行环境构建。 - Tran Son Hoang

Answer 1

你需要禁用JavaScript源映射：

不在问题中，但如果您需要它用于SCSS/CSS文件，则还有一个CSS源映射选项。另一种禁用它的“晦涩”方法是，如果您不想更改Chrome的设置并且可以控制服务器，则可以配置它不生成源映射行，这取决于您的服务器端生成器/编译器。您需要检查文档以了解其工作原理。源映射行应位于生成的js文件末尾，并如下所示：//# sourceMappingURL=/path/to/file.js.map。

- Luke Vo

---

@SofiaBo 你需要取消勾选它。 - wOxxOm

@wOxxOm 当我取消勾选它时，我也看不到任何 .ts 文件。 - Sofia Bo

@SofiaBo 是的，没错，JS文件应该会出现。除非（我是泛指，没怎么用过Angular）你的服务器已经把所有东西捆绑在一个单一的js文件中，在这种情况下，代码就在一个捆绑的JS文件中，你可能想要用TS文件来调试它。 - Luke Vo

@LukeVo 所以很可能是 webpack 将它打包了，这就是原因？ - Sofia Bo

是的。找出问题的一种方法是在代码中添加一个 debugger; 行，然后查看代码执行时它出现在哪里。 - Luke Vo