使用源映射进行Visual Studio调试

时间:2014-11-25 00:16:53

标签: internet-explorer visual-studio-2013 typescript source-maps

我正在使用Microsoft Visual Studio 2013 Update 4来调试Web应用程序。首先,我在Internet Explorer上运行Web应用程序,然后使用Visual Studio中的“调试”选项“附加到进程”附加iexplore脚本进程。然后我立即在解决方案资源管理器中获得一个名为“脚本文档”的新节点。在该节点中,我找到了所有JavaScript文件以及列出的各自的打字稿文件。从那时起,我就可以打开JavaScript文件并设置断点。不幸的是,我无法对打字稿文件做同样的事情。尝试打开它时,我收到“404 not found”错误。仔细看后,我发现用于检索它们的URL路径是错误的。所以我开始检查源文件的路径是否在源映射中正确设置,这是在打字稿文件的编译过程中生成的。看起来它们设置得恰到好处。我检查源映射是否正确的一种方法是使用开发人员工具在Internet Explorer和Chrome上进行调试。他们的工作完美无瑕。因此,我能想到的唯一结论是,当Visual Studio附加到IE时,源地图解释会发生一些事情。

为了正确澄清这一点,让我简要解释一下我的源地图的样子。您将在下面找到我的源地图文件的模板。

{
 version : 3,
 file : "someFile.js",
 sourceRoot : "/",
 sources : ["some/relative/path/someFile.ts"],
 names : ["bla", "bla", "bla"],
 mappings: "aaaG,agAA,agGG,acAA"
}

所以,我希望在Script Documents节点中看到typescript文件的路径(如果我们假设Web应用程序在localhost上运行): http://localhost:8081/some/relative/path/someFile.ts

但我认为,路径是: http://localhost:8081/(AbsolutePathToWhereTheJSFileIs)/some/relative/path/someFile.ts

最后我清楚地知道为什么我在阅读文件时遇到错误。我不明白为什么在它们之间插入一个绝对路径,而在我的源地图规范中没有任何指示。我尝试了很多其他路径的变化,但是持有脚本的目录的绝对路径总是在中间弹出。我甚至寻找可能将其关闭的设置(如果有的话),但我找不到任何设置。对于我所面临的这个问题,我将不胜感激。

干杯!

2 个答案:

答案 0 :(得分:1)

这是您的实际.map文件吗?

{
 version : 3,
 file : "someFile.js",
 sourceRoot : "/",
 sources : ["some/relative/path/someFile.ts"],
 names : ["bla", "bla", "bla"],
 mappings: "aaaG,agAA,agGG,acAA"
}

或者你得到了

{
 version : 3,
 file : "someFile.js",
 sourceRoot : "/",
 sources : ["(AbsolutePathToWhereTheJSFileIs)some/relative/path/someFile.ts"],
 names : ["bla", "bla", "bla"],
 mappings: "aaaG,agAA,agGG,acAA"
}

在任何情况下,您要使用的选项都是编译器标志sourceRoot,它是AbsolutePathToWhereTheJSFileIs配置选项。

答案 1 :(得分:0)

我发现了问题所在。在我的组织中处理节点服务器的代码正在做一些我没有注意到的事情。但是我在创建一个简单的样本测试时可以这样做,在这里分享。因此,在Visual Studio上附加iexplore脚本过程&调试工作没有麻烦。