时间戳

首页 > 解决方案 > Chrome 来源未显示从 Typescript 生成且具有源映射的文件

javascript - Chrome 来源未显示从 Typescript 生成且具有源映射的文件

问题描述

我有一个由 sapui5 作为控制器动态加载的文件。我已经更改了我的代码，以便我可以利用 Typescript 进行 Intellisense 和故障检测。

我的 JS 文件已成功创建，并在 Chrome 中正常运行。DevTools/Sources/Network 窗口没有列出我的“FinalAssembly.controller.js”文件，也没有列出名称相似的“FinalAssembly.controller.ts”文件。

我发现如果我从文件底部删除 '//# sourceMapURL=' 行，Chrome 最终会列出我的 JS 文件。

我已经读过在我的文件顶部使用'//# sourceURL ='行会导致我的文件被列出，但它不是，此外，我读到使用这个指令应该允许我改变源列表中显示的名称，它没有。Chrome 似乎忽略了这个指令。

到今天为止，Chrome 表示它是最新的 66 版。在过去的 4 小时内，我阅读了很多文章和 Github 问题，这些文章和 Github 问题表明 Source Maps 往往存在问题，并且在某些版本的 Chrome 中可能会失败。

地图文件本身可以在 Internet Explorer 中运行，但我真的看不到自己正在使用它进行开发。

有没有人在 Chrome 66 中使用 Source Map 调试过 JS？谁能建议我如何在 Chrome 中调试我的地图文件使用情况？

我在我的网站上放置了一个通过 VSCode (tsc.exe) 创建的非常简单的测试：http ://www.ia.uk.com/TypescriptTest/default.htm - 在我的 Chrome 66 上，这个似乎没有下载地图文件（提琴手没有看到任何请求）。不显示代码的任何 TS 视图。根据我的原始问题，这不是动态加载的库，但确实表明存在问题。

标签： javascripttypescriptgoogle-chromesapui5

解决方案

事实证明，DevTools 有它自己的一组设置。首选项选项卡有一个“启用 Javascript 源映射”，在我的副本中已关闭。我不记得曾经在那个屏幕上，但显然这个框没有被选中。

对于我的小示例中的普通 JS 文件，会显示 JS 和 TS 文件。当文件为动态文件时，仅显示 TS 文件。这意味着如果地图被禁用，您将一无所获（因为 JS 文件未显示）。

推荐阅读