TypeScript 源地图文件不适用于 Chrome
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13569192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeScript source map files don't work with Chrome
提问by Ken Smith
I'm trying to get TypeScript source debugging working in Chrome, but I'm running into two specific and perhaps related problems.
我正在尝试在 Chrome 中进行 TypeScript 源代码调试,但我遇到了两个特定的可能相关的问题。
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:
第一个是由 TypeScript/WebEssentials 编译器生成的用于标识源映射文件位置的注释如下所示:
//sourceMappingUrl=MySourceFile.js.map
//sourceMappingUrl=MySourceFile.js.map
But Chrome won't read that file. It seems expect that the comment will look like this:
但是 Chrome 不会读取该文件。似乎期望评论看起来像这样:
//@ sourceMappingUrl=MySourceFile.js.map
//@ 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.
如果我手动将注释更改为该注释,并刷新我的页面,那么对所有 .ts 文件的引用神奇地显示为 Chrome 开发人员工具中的源。
However, that leads to my second problem, as the files don't actually get loaded. The .ts source file that Chrome shouldbe trying to download is http://localhost/MySourceFile.ts
, but the one that it's actuallytrying 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:
然而,这导致了我的第二个问题,因为文件实际上并没有被加载。Chrome应该尝试下载的 .ts 源文件是http://localhost/MySourceFile.ts
,但它实际尝试下载的是.ts 源文件http://localhost/C:/source/web/MySourceFile.ts
。这是有道理的,因为 MySourceFile.js.map 的打开属性如下所示:
{"version":3,"file":"tmp1523.tmp","sources":["C:/source/web/MySourceFile.ts"
{"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
.
但这显然不适用于 Chrome,因为它将源映射位置解释为完全相对的,并且 IIS(非常正确)不会提供任何类似于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?
那么,关于这两个问题,是 Chrome 还是 TypeScript 源映射功能做错了?这样做的推荐方法是什么?
I'm using Chrome 25.0.1323.1 dev-m, with TypeScript 0.8.1 and WebEssentials 1.8.5.
我使用 Chrome 25.0.1323.1 dev-m,TypeScript 0.8.1 和 WebEssentials 1.8.5。
采纳答案by Jude Fisher
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.
这是Web Essentials版本 1.8.5 (当前可从 Visual Studio Gallery 获得的版本)的一个问题。最新的夜间构建(在撰写本文时http://madskristensen.net/custom/webessentials2012.vsix)修复了该问题并正确生成地图链接。