Visual Studio Debugging with Source Maps

Question

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"
}

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

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.

Cheers!

Answer 1

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.

Answer 2

Is this your actual .map file?

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

Or do you get

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

In any case the option you are looking to play with is the compiler flag sourceRoot which is the AbsolutePathToWhereTheJSFileIs configuration option.