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

VS 2012、Web Essentials、TypeScript 0.8.3

有一个类型脚本文件“test.ts”。它被编译成“test.js”，末尾有一个sourceMappingURL

//@ sourceMappingURL=test.js.map

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

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

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

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

实际上，正确的名称“test.ts”或任何其他名称是否被编码并不重要

应该做些什么，以便使用Chrome调试TypeScript文件（生成的Javascript文件是动态加载的）

我也试过金丝雀。这没有什么区别。

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

注意，这只适用于与某些JS输出匹配的代码——因此（逻辑上足够）不能在接口定义内的任何位置设置断点

---

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

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

---

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

我写这篇文章是为了确认我写了什么。使用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将位于源代码树中的正确文件夹中

使用//#source=Path_to_文件可以工作，但是 A.必须具有正确的路径，并且 B.文件名显示在下；这真的很难看

---

PS-我没有50点声誉积分，所以我不能在WhyMe的评论旁边回复评论，但我可以添加一个答案

你知道为什么通过require.js加载文件可以解决这个问题吗？require.js有什么比$.getScript更好呢？我不知道，抱歉-我甚至不确定require.js是否使用了与

$.getScript

相同的机制。我只能猜测

getScript

意味着路径在某种程度上发生了变化，因此从.js文件到.ts和.map的链接丢失了。您可以尝试手动编辑它们，使它们成为绝对路径或相对于html页面的路径，看看这是否有帮助。非常感谢您的回答。我查看了其他Javascript加载程序，它们也能够以某种方式动态加载Javascript，因此可以在Chrome中进行调试。我使用$（'head'）.append（…）和$（'head'）[0].appendChild（…）加载了JS脚本。第一个不允许我调试脚本，但第二个允许。希望有帮助。