Chrome来源未显示由Typescript生成并具有来源映射的文件 [英] Chrome sources not showing a file that was generated from Typescript and has a source map

问题描述

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

I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.

我的JS文件已成功创建，并且可以在Chrome中正常运行. "DevTools/源/网络"窗口没有列出我的"FinalAssembly.controller.js"文件，也没有列出类似名称的"FinalAssembly.controller.ts"文件.

My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.

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

I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.

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

I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.

从今天开始，Chrome指示它是最新版本66.过去4个小时，我已经阅读了许多文章和Github问题，这些问题表明Source Maps可能有问题，并且在某些版本的Chrome中可能会失败

As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.

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

The map file itself works in Internet Explorer, but I can't really see myself developing with that.

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

Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?

我已经在我的网站上放置了一个通过VSCode(tsc.exe)创建的非常简单的测试:

I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk.com/TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.

推荐答案

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

It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.

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

For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).

这篇关于Chrome来源未显示由Typescript生成并具有来源映射的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！