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

使用 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 文件是动态加载的？

我也试过 Canary。没有任何差别。

答案＃1

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

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. 文件名会显示在下；这看起来真的很丑。

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

答案＃2

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

请注意，这仅适用于与某些 JavaScript 输出匹配的代码——所以（逻辑上很合理）你不能在接口定义的任何地方设置断点。

我不确定使用 require.js 来按需加载脚本是否可行。如果可行的话，它应该能解决你的问题。