24. März 2013

Dynamisches JavaScript in den Chrome Developer Tools

24. März 2013 - Geschrieben von Martin - Keine Kommentare

Das neue Resigame ist ja komplett Single Page, sprich alle Inhalte werden nachgeladen und dynamisch aufgebaut ohne dass die Seite auch nur ein einziges mal neu geladen werden muss.

Hierbei lade ich natürlich die JavaScript Dateien nur dann wenn ich sie brauche, also über eine Requirejs ähnliche Schnittstelle in meine App. Ich habe das ganze noch ein wenig „verfeinert“, bzw. an meine Bedürfnisse angepasst.

Das Problem an der Sache ist nur, dass diese Dateien dann natürlich in den Chrome Entwickler Tools unter „Source“ nicht auftauchen, weil dieser Tab nur die im HTML – beim Seitenaufbau – existenten Scripts erkennt. Um das zu umgehen hängt man einfach in die js Dateien ganz unten folgenden Kommentar:

//@ sourceURL=/static/lib/resigame/map.js

natürlich muss der Pfad angepasst werden. Übrigens ist dieses Verhalten ganz praktisch, wenn man auch in der Entwicklung schon mit kompilierten/komprimierten JavaScript Dateien arbeiten möchte, denn hängt man den Source Url Kommentar unten an jenes komprimiertes File an, wird das dort angegebene als sog. Source Map verwendet sprich, in den Entwickler Tools sieht man dieses und man kann bequem Breakpoints im Klartext Quellcode setzen. Allerdings muss hierzu ein Kompiler verwendet werden, der Source Maps unterstützt, dass ist meines Wissens nach momentan nur der Closure Compiler von Google. Mehr Informationen zu den Source Maps hier: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Schreibe einen Kommentar