Chrome 来源未显示从 Typescript 生成并具有源映射的文件答案

【问题标题】：Chrome sources not showing a file that was generated from Typescript and has a source mapChrome 来源未显示从 Typescript 生成并具有源映射的文件
【发布时间】：2018-10-21 01:37:39
【问题描述】：

我有一个由 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 上，这个似乎根本没有下载地图文件（Fiddler 没有看到任何要求）。不显示代码的任何 TS 视图。根据我原来的问题，这不是动态加载的库，但确实表明存在问题。

【问题讨论】：

您可以尝试将debugger 关键字放入您确定已执行的代码中的 TypeScript 源文件吗？当 DevTools 处于活动状态时，它应该在该行中断并通过源映射向您显示代码。
当我尝试不使用 sourceMappingURL= 时，我会在 Sources 中获得文件名，但无论如何都会发生这种情况。使用 sourceMappingURL=，调试器停止，但文件选项卡显示类似“VM539”（数量不同）。 Sources里面没有文件，但是sourceMappingURL指令已经填成了绝对路径，所以很明显是浏览器处理的。
这很奇怪。以防万一，您确定启用了源映射吗？您使用什么工具来创建源地图？
创建麻烦应用程序的工具是 VS2017，但我认为我看到的问题是 Chrome - 我添加了一个非常简单的示例，表明 Typescript 调试甚至无法正常工作当脚本未动态加载时。这对你有用吗？
一位同事在他的 Chrome 66 中运行了这个，test.ts 文件出现在 test.js 旁边，并且调试工作正常，所以我要卸载/重新安装 Chrome。

标签： javascript typescript google-chrome sapui5

【解决方案1】：

确保您的 Angular 应用已启动。

如果您的 Angular 应用程序未启动，则您无法在 Chrome 中看到 .ts 文件。所以你需要先运行 Angular 应用。

【讨论】：

【解决方案2】：

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

【讨论】：

确保您的 NPM 在命令提示符下运行，然后只有您能够在浏览器中查看源代码 1) 打开项目文件夹并输入 cmd 并搜索和 TYPE Cammand ,,, npm serve 否则您的项目特定指挥官..谢谢你

【解决方案3】：

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

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

【讨论】：

这就是我在my comment 中的意思，问“以防万一，你确定你启用了源映射吗？” :)