Source Maps – Javascript wird wieder les- und wartbar!
In der Webentwicklung gehört es heute zur gelernten Praxis, dass ausgelieferte Javascript Dateien zusammengefasst und komprimiert werden. Auch andere Sprachen, welche sich zu Javascript “kompilieren” lassen, wie z.B. Coffeescript oder das Google Web Toolkit kennt und nutzt man. Größtes “Ärgernis” als Entwickler: Die Dateien sind so stark verändert, sodass ein Debugging beinah unmöglich ist. Ohne Umwege geht es bislang nicht.
Google und Mozilla arbeiten nun an einer Verbesserung dieser Situation, genannt Source Maps:
Wer einen aktuellen Chrome hat, sollte auch diese Checkbox sehen.
Ich hab das Video nicht angeschaut – was sind Source Maps?
Source Maps sind eine Art “Lesezeichen” für komprimierten und minifizierten Javascript Code. Durch die Source Maps können die “originalen” Dateien wieder hergestellt werden ohne die unnötigen Overhead.
Wo ist der Haken?
Man benötigt natürlich einen “Javascript Compiler”, welcher Source Maps erstellt. Momentan ist der Closure Compiler wohl der einzige, der dies unterstützt. Andere werden vermutlich folgen.
Demo (mit aktuellem Chrome getestet) : http://dev.fontdragr.com/
Ohne Source Maps wird eine Javascript Datei erzeugt:
Mit Source Map aktiv:
Lesbar!
Was macht Mozilla in dem Gebiet?
Auch Mozilla arbeitet an dem Support der Source Maps.
Wie wird eine Source Map erstellt?
Momentan über den Closure Compiler. Am Ende des Blogposts kommen noch weiterführende Links.
Wie sieht eine Source Map aus?
Eine Source Map ist einfach ein JSON File, welches der Browser zum Debuggen runterladen kann.
{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}
Am wichtigsten ist die Zeile 7 – dort geschieht das Mapping. Wie das genau gemacht wird, steht hier.
Interessiert? Dann gehts hier weiter…
Introducing Javascript Source Maps auf HTML5Rocks.com: Einstiegsbeitrag mit Erklärung wie die Source Map im Detail aufgebaut ist.
Mozilla´s Source Map Projekt auf GitHub: Enthält noch einige interessante Links zu Mozilla Seiten zu diesem Thema. Auch Implementierungscode findet man dort.
Source Map Revision 3 Proposal: Der “Standard” Vorschlag.
Was machen eigentlich die anderen Browserhersteller?
Zu Microsoft, Apple und Opera konnte ich diesbezüglich nicht finden.
About the author
Written by Robert Mühsig
Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.
SeeeD
11. April 2012
Wenn die JS Dateien obfuscated wurden macht das sogar richtig Sinn.
Sollte das JS allerdings nur “minified” sein (Leerzeichen und Zeilenumbrüche raus), dann kann man die Dokumente auch mithilfe moderner Browser formatieren lassen
Chrome hat in der Ansicht des JS dafür den Button “{ }” (Pretty Print).
Robert Mühsig
11. April 2012
Jepp, obwohl ich das Wort “obfuscated” in diesem Kontext nicht für Javascript Code nutzen würde
Es geht ja nicht um Verschleierung, sondern eher darum, dass der Client möglichst wenig Daten runterladen muss. Das der Code hinterher nicht mehr lesbar ist, ist ja eher ein lästiges “Nebenprodukt”.