Debugging polymer apps: stack trace is wacko

[johnjbarton]

1. Install polymer zip file in ./third_party/polymer
   https://github.com/Polymer/polymer/releases/download/v0.0.20131003/polymer-all-v0.0.20131003.zip
2. Install the attached .html file in ./test/onLoadError.html
3. Open the .html file in browser,
4. Open devtools > sources panel > pause on errors (stop-signy thing)
5. reload.

The stack is mapped to source but the locations make no sense.

[johnjbarton]

Using polymer.js without the minification the stack is ok. So either the sourcemap is incorrect or devtools is mis-decoding the sourcemap.

[johnjbarton]

Decoding the sourcemap with https://github.com/mozilla/source-map gives the same result as devtools. I'm surprised but it indicates the map in polymer is incorrect.

[johnjbarton]

Firefox v25 gives the same result as Chrome devtools, the stack frames are not mapped to correct source lines.

[johnjbarton]

If I build polymer and use polymer.concat.js, then the sourcemap works. polymer.min.js does not work.

[johnjbarton]

If I change the gruntfile.js to use
mangle: false,
beautify: true,
in the uglify step, then the sourcemap works.

[dfreedm]

Thanks for the deep analysis!

Mangling should just be a filesize optimization (even better with gzip). I'll see if I can mangle the sourcemap into the right shape, or if we have to live with turning that optimization off.

[johnjbarton]

Just a suggestion: you might try a different minifier, eg one based on esprima just to see if you can get opt and correctness without understanding the cause.

[dfreedm]

Looks like the root cause is gruntjs/grunt-contrib-uglify#22.

Using banner to include the LICENSE will not update the line numbers in the sourcemap, as the banner is added after that step.

I will work around this by adding the license file as a JS source, and uglify will preserve it with the @license JsDoc tag.