Chrome DevTools 不显示 .js 文件

Posted 2023-03-07

【中文标题】Chrome DevTools 不显示 .js 文件

【英文标题】：Chrome DevTools do not show .js files

【发布时间】：2020-04-17 23:45:32

【问题描述】：

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

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

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

【问题讨论】：

这种需要有什么特别的原因吗？

您可以查看此链接***.com/a/50290220/5146848

这能回答你的问题吗？ Chrome sources not showing a file that was generated from Typescript and has a source map

您是否在 JIT 模式下构建源代码？此模式不会对您的代码进行编码，并允许您通过浏览器进行调试。

有什么特别的原因吗？好吧，想调试 .js 代码 + 看看 .ts 编译成什么。不，不幸的是，上面的链接没有帮助。我用他们提供的信息更新了我的答案。

【参考方案1】：

您需要禁用 Javascript Sourcemap：

不在问题中，但如果 SCSS/CSS 文件需要它，那里还有一个 CSS 源映射选项。

另一种模糊禁用它的方法是，如果不想更改 Chrome 的设置并且您可以控制您的服务器，您可以将其配置为不生成源映射行，这取决于您的服务器端生成器/编译器。您需要查看文档以了解其工作原理。源映射行应该在生成的 js 文件的末尾，如下所示：

//# sourceMappingURL=/path/to/file.js.map

【讨论】：

感谢您的回答，但该复选框已被选中。所以，这可能还有另一个原因。

@SofiaBo 你需要取消选中它。

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

@SofiaBo 是的，没错，JS 文件应该会显示出来。除非（我一般来说，与 Angular 没有太大的关系）您的服务器已经将所有内容捆绑在一个 js 文件中，在这种情况下，代码位于捆绑的 JS 中的某个位置，您可能希望使用 TS 文件进行调试。

@LukeVo 所以可能是 webpack 捆绑了它，这就是原因？