What's wrong with my Closure compiled sourcemap?

https://stackoverflow.com/questions/21926241

14-10-2022
|

Вопрос

I compiled a small test with Closure as described here:

Using java -jar compiler.jar --js test.js --create_source_map ./test-min.js.map --source_map_format=V3 --js_output_file test-min.js I have:

HTML:

<html>
<body>
<canvas id="doodle" height="200" width="200"></canvas>

<script src="test-min.js"></script>
</body>
</html>

JS test-min.js:

(function(){for(var b=document.getElementById("doodle").getContext("2d"),a=0;100>a;a++)b.fillStyle="rgb(200,0,0,0.1",b.fillRect(10*a,10,55,50*a),b.fillStyle="rgba(0, 0, 200, 0.1)",b.fillRect(30,30*a,55,50*a)})();
//# sourceMappingURL=test-min.js.map

JS test-min.js.map:

{
"version":3,
"file":"test-min.js",
"lineCount":1,
"mappings":"AAAC,SAAQ,EAAG,CAEV,IADD,IAAIA,EAAMC,QAAAC,eAAA,CAAwB,QAAxB,CAAAC,WAAA,CAA6C,IAA7C,CAAV,CACUC,EAAE,CAAX,CAAgB,GAAhB,CAAcA,CAAd,CAAqBA,CAAA,EAArB,CACCJ,CAAAK,UAIA,CAJgB,iBAIhB,CAHAL,CAAAM,SAAA,CAAc,EAAd,CAAiBF,CAAjB,CAAoB,EAApB,CAAwB,EAAxB,CAA4B,EAA5B,CAA+BA,CAA/B,CAGA,CADAJ,CAAAK,UACA,CADgB,sBAChB,CAAAL,CAAAM,SAAA,CAAc,EAAd,CAAkB,EAAlB,CAAqBF,CAArB,CAAwB,EAAxB,CAA4B,EAA5B,CAA+BA,CAA/B,CAPS,CAAX,CAAA;",
"sources":["test.js"],
"names":["ctx","document","getElementById","getContext","i","fillStyle","fillRect"]
}

all in the same folder. However, neither Firefox nor Chrome devtools will show uncompiled source from the sourcemap. Am I doing something wrong, or is this a bug in the latest Closure compiler?

Решение

The files look OK to me, and I just tried this with the latest Closure Compiler without problems. Since you didn't mention these two things in your question, you should verify the following:

Make sure that the original .js file, test.js is in the same directory. The source map tells the browser how to map lines in the minified/compiled file to the original source -- but it still needs the original source.
Make sure that JavaScript source map support in enabled. In Chrome, look for JavaScript source map support Under Sources in the Settings. In Firefox, check "Show original sources" in the Debugger options.

If you have those things set up, it should work correctly. Note that you can still see the contents of the minified file if you go into the sources panel and click on the min.js file. However, if you set a breakpoint in the non-minified file, it should work correctly.

Likewise, if you have an exception in your code (and you have break on exception turned on), when you enter the debugger, it should show where the exception occurred in the non-minified code.