TypeScript源地图文件不适用于Chrome [英] TypeScript source map files don't work with Chrome

问题描述

我试图在Chrome中使用TypeScript源代码调试，但我遇到了两个特定的问题，也许是相关的问题。

第一个是由TypeScript / WebEssentials编译器生成的应该识别源映射文件位置的注释如下所示：

// sourceMappingUrl = MySourceFile.js.map

但Chrome不会阅读该文件。看来预计评论将如下所示：

// @ sourceMappingUrl = MySourceFile.js.map

如果我手动将注释手动更改为该注释并刷新页面，那么神奇地将所有.ts文件的引用显示为Chrome开发人员工具中的源代码。 p>

然而，这导致我的第二个问题，因为文件实际上并未加载。 Chrome 应该尝试下载的.ts源文件是 http：//localhost/MySourceFile.ts ，但它是 >实际上试图下载的是 http：// localhost / C：/source/web/MySourceFile.ts 。这是有道理的，因为MySourceFile.js.map的开放属性如下所示：

{version：3，file ：tmp1523.tmp，sources：[C：/source/web/MySourceFile.ts

在Chrome浏览器中不起作用，因为它将源地图位置解释为完全相对的，并且IIS（非常正确）不会提供任何类似于 http：// localhost / C：/的URL。 source / web / MySourceFile.ts 。

因此，就这两个问题而言，Chrome还是TypeScript源地图功能做错了？我推荐使用Chrome 25.0.1323.1 dev-m，TypeScript 0.8.1和WebEssentials 1.8.5。

解决方案

这是 Web Essentials （当前可从Visual Studio Gallery获得的版本）。最新的每晚构建（在写作时 http://madskristensen.net/custom/webessentials2012.vsix）修复了这个问题并正确地生成了地图链接。

I'm trying to get TypeScript source debugging working in Chrome, but I'm running into two specific and perhaps related problems.

The first is that the comment generated by the TypeScript/WebEssentials compiler that's supposed to identify the location of the source map file looks like this:

//sourceMappingUrl=MySourceFile.js.map

But Chrome won't read that file. It seems expect that the comment will look like this:

//@ sourceMappingUrl=MySourceFile.js.map

If I manually change the comment to that, and refresh my page, then magically the references to all the .ts files show up as sources in the Chrome Developer Tools.

However, that leads to my second problem, as the files don't actually get loaded. The .ts source file that Chrome should be trying to download is http://localhost/MySourceFile.ts, but the one that it's actually trying to download is http://localhost/C:/source/web/MySourceFile.ts. That sort of makes sense, as the opening attributes of MySourceFile.js.map look like this:

{"version":3,"file":"tmp1523.tmp","sources":["C:/source/web/MySourceFile.ts"

But that obviously doesn't work with Chrome, as it interprets the source-map location to be entirely relative, and IIS (quite correctly) won't serve up any URL looking like http://localhost/C:/source/web/MySourceFile.ts.

So, with respect to these two problems, is it Chrome or the TypeScript source-map feature that's doing it wrong? And what's the recommended way of doing this?

I'm using Chrome 25.0.1323.1 dev-m, with TypeScript 0.8.1 and WebEssentials 1.8.5.

解决方案

This is an issue with version 1.8.5 of Web Essentials (the version currently available from the Visual Studio Gallery). The latest nightly build (at time of writing http://madskristensen.net/custom/webessentials2012.vsix) fixes the problem and generates the map linkage correctly.

这篇关于TypeScript源地图文件不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！