使用源映射进行Visual Studio调试 [英] Visual Studio Debugging with Source Maps

问题描述

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

I am using Microsoft Visual Studio 2013 Update 4 to debug a web application. First, I ran the web application on Internet Explorer and then I attach the iexplore script process using the Debug option "Attach to process" in Visual Studio. Then I immediately get a new node in the Solution Explorer called 'Script Documents'. In that node, I find all of the JavaScript files along with their respective typescript files listed. From then on, I am able to open the JavaScript files and set breakpoints. Unfortunately, I am not able to do the same for the typescript files. I get a '404 not found' error when trying to open them. After a closer look, I see that the URL path that is used to retrieve them is wrong. So I start checking if the path for the source files is set properly in the source maps, that were generated during the compilation of the typescript files. And it looks like they are properly set. One way I checked if the source maps were correct was by using the Developer Tools to debug on both Internet Explorer and Chrome. And they worked flawlessly. Therefore, the only conclusion I could come up with was there was something happening with the source map interpretation when Visual Studio was attached to IE.

为了正确地阐明这一点，让我简要解释一下源映射的外观.在下面，您将找到我的源地图文件的模板.

In order to clarify this properly, let me briefly explain how my source maps look like. Below you will find a template of my source map file.

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

因此，我希望在脚本文档"节点中看到打字稿文件的路径(如果我们假设Web应用程序在本地主机上运行): http://localhost:8081/some/relative/path/someFile.ts

So, I was expecting to see the path of the typescript file in the Script Documents node to be (if we assume the web app is run on localhost): http://localhost:8081/some/relative/path/someFile.ts

但是我看到的是，路径是: http://localhost:8081/(AbsolutePathToWhereTheJSFileIs)/some/relative/path/someFile.ts

But instead I see that, the path is: http://localhost:8081/(AbsolutePathToWhereTheJSFileIs)/some/relative/path/someFile.ts

我终于清楚为什么读取文件时出现错误.我不明白为什么在两者之间插入了绝对路径，而我的源映射规范中却没有指示.我尝试了其他许多路径变化，但包含脚本的目录的绝对路径总是在中间弹出.我什至在寻找有可能将其关闭的设置(如果有的话)，但找不到任何设置.对于我面临的这个问题，我将不胜感激.

It was finally clear to me why I was getting error when reading the file. I do not understand why there is an insertion of an absolute path in between, while there is no indication of that in my source map specification. I tried it with so many other variations of paths but the absolute path of the directory holding the script always pops up in the middle. I even looked for settings (if there are any) that could potentially turn it off, but I was not able to find any. I would appreciate any help regarding this issue I am facing.

干杯！

推荐答案

我发现了问题所在.处理我组织中的节点服务器的代码正在动态执行某些我没有注意到的操作.但是，当我创建一个简单的示例测试以在此处共享时，我能够做到这一点.因此，将iexplore脚本过程附加到Visual Studio&调试工作没有麻烦.

I have found what the problem is. The code that handles the node server in my organization was doing something on the fly that I didn't notice. But I was able to do so when creating a simple sample test to share here. So, attaching iexplore script process on Visual Studio & debugging works without hassle.

这篇关于使用源映射进行Visual Studio调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！