调试从Chrome中的TypeScript生成的动态加载的Javascript

Question

使用VS 2012，Web Essentials，TypeScript 0.8.3

有一个TypeScript文件“test.ts”。它被编译成“test.js”，在其末尾有一个sourceMappingURL。

//@ sourceMappingURL=test.js.map

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

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

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

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

实际上无论是正确的名称“test.ts”还是任何其他名称都无关紧要。

应该做什么，因此Chrome可以调试生成的Javascript文件是动态加载的TypeScript文件吗？

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

Answer 1

我写信是为了肯定WhyMe所写的内容。使用jQuery.append（）附加标记不会将文件名添加到源树，而是使用DOM元素添加到.appendChild DOES将文件名添加到源树。

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.文件名出现在＆lt; No Domain＆gt;下;这真是太丑了。

PS - 我没有50个声望点，所以我不能在WhyMe的评论旁边作为评论回复，但我可以添加答案吗？

Answer 2

使用Chrome Canary（25.0.1364.172 m），并使用require.js动态加载脚本，我可以在打字稿文件上设置和使用断点：

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

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

Answer 3

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

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