2

使用 VS 2012、Web Essentials、TypeScript 0.8.3

有一个 TypeScript 文件“test.ts”。它被编译成“test.js”，最后有一个 sourceMappingURL。

//@ sourceMappingURL=test.js.map

Javascript 文件使用 $.getScript 动态加载。但是，在 Chrome 开发人员工具中，我无法在任何地方找到源代码，因此无法设置断点。

如果我通过附加 sourceURL 手动编辑生成的 Javascript，情况会有所改善。

//@ sourceMappingURL=test.js.map
//@ sourceURL=test.ts

Chrome 的 Sources 树中提供了名称“test.ts”。但是，单击它会打开 Javascript 文件“test.js”。可以设置和使用断点。

实际上，是否编码了正确的名称“test.ts”或任何其他名称都没有关系。

应该怎么做，所以可以用 Chrome 调试一个 TypeScript 文件，它生成的 Javascript 文件是动态加载的？

我也试过金丝雀。它没有任何区别。

4

3 回答 3

2

我写信是为了确认WhyMe 所写的内容。使用 jQuery.append() 附加标签不会将文件名添加到源树，但使用 DOM 元素到 .appendChild 确实会将文件名添加到源树。 

var fileref = document.createElement('script');
                    fileref.setAttribute("type", "text/javascript");
                    fileref.setAttribute("src", 'Scripts/app/Views/Management/Spock.js');
                    document.getElementsByTagName("head")[0].appendChild(fileref)

Spock.js 将位于 Sources 树中的正确文件夹中。

使用 //# source=Path_to_file 有效，但 A. 路径必须正确，并且 B. 文件名出现在 <No Domain> 下；这真的很难看。

PS - 我没有 50 点声望点，所以我无法在WhyMe 的评论旁边回复评论，但我可以添加答案？

于 2014-03-22T02:57:50.623 回答
1

在 Chrome Canary (25.0.1364.172 m) 中工作，并使用 require.js 动态加载脚本，我可以在 typescript 文件上设置和使用断点：

在此处输入图像描述

请注意，这仅适用于与某些 JS 输出匹配的代码 - 因此（从逻辑上讲）您不能在接口定义内的任何位置设置断点。

我不确定是否可以选择使用 require.js 进行按需脚本加载。如果是这样，它应该可以解决您的问题。

于 2013-03-17T10:59:37.510 回答
0

$.getScript 可能会使用 xmlhttp 加载文件并稍后将 javascript 添加到 DOM，因此浏览器无法将 javascript 映射到 js 断点

Requirejs 添加了一个带有 src 属性的脚本标签，这样浏览器仍然可以命中断点

于 2013-09-29T08:46:38.663 回答