Sourcemap gotchas

Encountered a few gotchas when manually setting up sourcemap. In a typical v3 sourcemap (written in json), you have:

[code] { version : 3, file: "out.js", sourceRoot : "", sources: ["foo.js", "bar.js"], names: ["src", "maps", "are", "fun"], mappings: "AAgBC,SAAQ,CAAEA" } [/code]

  • The file property is where you specify the name of minimized, compiled script. Cross checked with //# sourceMappingURL in the compiled script to pair them up

  • The sources is where devtools will be looking for the associated files. Make sure the path names are valid and accessible (via normal requests). sourcesRoot can be used to provide common path prefix

  • Last but not least, I didn’t realize first that the un-minimized source files are necessary. That is, just the .min.js and .min.js.map are not enough info to reconstruct the source. You need the sources!

With all of the above, devtool should be giving you un-minimized, debuggable source

Written on March 19, 2017