Getting source maps working with evaluated code

Question

I have a build script that runs all my code through uglifyjs, does a bunch of fancy caching stuff, and ultimately runs eval( code ) on some JavaScript files.

I'm trying to get this whole process up and running with source maps, but I can't seem to get it working as long as I'm using eval. If I link to the files directly using <script src="..."> it works fine.

In my eval code, I have:

code, blah blah blah
//@ sourceMappingURL=/cache/618a67795c7460184bd9b99020cbb9fd.map

and then in that .map file, I have:

{
      "version"  : 3
    , "file"     : "618a67795c7460184bd9b99020cbb9fd.map"
    , "sources"  : ["/js/Parallax-JS/js/parallax-2.js"]
    , "names"    : [
          "a"
        , "bunch"
        , "of"
        , "variable"
        , "names"
    ]
    , "mappings" : "... LONG MAP ..."
}

I've tried putting //@ sourceURL= at the end instead, and that at least gives me the correct file name, but still no readable source.

Any ideas? Testing in Chrome 25 (dev) and 26 (canary)

Answer 1

I had a similar problem and the solution seem to be using an inlined SourceMaps (DataURL of a SourceMap).

Here is an example:

eval("blah blah\n//@ sourceMappingURL=data:application/json;base64,...");

Seems like you can't reference external resources from an eval.

I think you also need to use sourcesContent to insert the source code into the SourceMap.

Tested with Chrome 32.