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!

See also this answer: stackoverflow.com/questions/29342738/… — Arjan Einbu
– Arjan Einbu, Commented Mar 30, 2016 at 10:54

basarat · Accepted Answer · 2014-11-25 00:56:42Z

1

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.

answered Nov 25, 2014 at 0:56

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KonyKing Over a year ago

My .map file is exactly as I wrote it. It does not contain the AbsolutePathToWhereTheJSFileIs. And I have been playing with the -sourceRoot flag and the map files are okay as they are. I can debug on Internet Explorer and also Chrome with them. The only time the problem arises is when I attach the iexplore script process to Visual Studio, then I, out of nowhere, get the absolute path inserted in the path of the typescript files. Do you have any idea why that might be?

basarat Over a year ago

Has to be some Project configuration then. No clue. Perhaps report it here : github.com/Microsoft/TypeScript/issues

KonyKing Over a year ago

Maybe it is not really a Typescript problem, but I will give it a try. Thanks for your time though.

basarat Over a year ago

But the TS team might be able to point you to the right team. Basically its a attach to iexplore after the launching the application failing error. Perhaps its not a supported use case.

KonyKing · Accepted Answer · 2014-11-27 10:08:22Z

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.

Collectives™ on Stack Overflow

Visual Studio Debugging with Source Maps

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related