Chrome 源代码未显示从 Typescript 生成且具有源映射的文件

Question

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

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

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

我读过，使用文件顶部的 '//# sourceURL=' 行会导致我的文件被列出，但事实并非如此，进一步，我读到使用此指令应该允许我改变显示在源列表中的名称，但它没有。Chrome 似乎忽略了该指令。

截至今天，Chrome 表示它已更新为版本 66。在过去 4 小时内，我阅读了很多文章和 Github 问题，这些问题表明源映射往往存在问题，并且在某些版本的 Chrome 中可能会失败。

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

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

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

Answer 1

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

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

Answer 2

只需打开 devTools 并重置浏览器即可。