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

Question

使用 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

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

实际上，无论编码的是正确的名称“test.ts”还是任何其他名称，都并不重要。

应该做什么，以便可以使用 Chrome 调试 TypeScript 文件(其生成的 Javascript 文件是动态加载的)？

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

Answer 1

我写这封信是为了肯定 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 将位于源树中的正确文件夹中。

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

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