Sourcemap error when viewing files in Chrome Dev Tools

[attebury]

We use an absolute path on the server to reference our scripts and use the Visual Studio Web Essentials plugin to bundle scripts.

Chrome Dev Tools looks for the bundle file location as specified in the .js.map 'sources' array.

There's a Chrome Dev Tools thread on the subject: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/gHiK0mPYBxA

Here's a snippet of our .bundle file inside of a stand alone assets project.

/v1/src/js/libs/jquery/jquery-1.9.1.js /v1/src/js/libs/jquery/jquery.maskedinput-1.3.1.js

Chrome Dev Tools sees this source map file, but when I click to open in a new tab it uses this url http://mywebserver/v1/src/js/libs/jquery/jquery-1.9.1.js

But the actual path of this file is http://mywebserver/assets/v1/src/js/libs/jquery/jquery-1.9.1.js

The Web Essentials .js.map file shows sources as "sources":["/v1/src/js/libs/jquery/jquery-1.9.1.js", ...

I can manually edit the .js.map file to include the /assets absolute path and I can then see the contents of the file. "sources":["/assets/v1/src/js/libs/jquery/jquery-1.9.1.js", ...

I've attached a screenshot with the results of the manually edited .js.map file and one of the same file with the incorrect 'source' entry.

[attebury]

I was able to resolve this issue by changing the absolute path to a relative path.

In our case: /v1/src/js/libs/jquery/jquery-1.9.1.js to ../v1/src/js/libs/jquery/jquery-1.9.1.js

It looks like scripts kept in a separate project should use relative paths in the .bundle file.

[rSffsE]

@attebury I have the same problem in that my application is an extra virtual directory deeper at runtime, than Web Essentials detects from the VS project eg: /myproject/myscriptfolder in the VS project, is at /myvdir/myproject/myscriptfolder at runtime.

So when the source map has a relative path to /myproject/myscriptfolder/myscript.js it HTTP 401's on retrieving the source because it's at really at /myvdir/myproject/myscriptfolder

and I tried your solution above to use a relative path in the *.bundle file xml eg:

<files>
    <file>../myscriptfolder/myscript.js</file>
</files>

However then the sources value in the emitted js.map file points to the VS path! eg

"sources":["../../../../../../Program%20Files%20(x86)/Microsoft%20Visual%20Studio%2012.0/Common7/IDE/myscriptfolder/myscript.js"], 

I am using Web Essentials 2013 Update 4 v2.5.4

Unfortunately I think this means that bundling won't work for my purposes.