Chrome doesn’t show un-minified code in spite of source map present

Question

I’m using Grunt and UglifyJS to generate source maps for my AngularJS app. It produces a file customDomain.js and customDomain.js.map.

JS file

Last line of customDomain.js looks like this:

//# sourceMappingURL=customDomain.js.map

Map file

I find two references to customDomain.js inside of customDomain.js.map, one at the beginning:

"sources":["../../../.tmp/concat/scripts/customDomain.js"]

I think this looks weird so I trim it to:

"sources":["customDomain.js"]

The second reference is at the end:

"file":"customDomain.js"

...which I leave as it is.

Testing

When I run my app in Chrome I expect to see my development code when I click on customDomain.js, but I do not:

I can see on the console output from my web server that customDomain.js.map is indeed requested from the browser:

200 /js/customDomain.js.map (gzip)

What is missing?

Answer 1

"sources":["customDomain.js"] should be relative to the customDomain.map.js file.
Make sure they are in the same directory on your server if this is the case for you.

"file":"customDomain.js" should be changed to the name of the map file, in your case this would be "file":"customDomain.map.js".

Here's a map file example taken from treehouse (sourceRoot may be unnecessary in your case):

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}