chromedevtools – JavaScript debuggen mit Eclipse und Chrome

Gestern habe ich darüber geschrieben, wie ich PhoneGap Apps im Browser debugge. Das ist schon ganz nett und bei nicht so komplexen Programmen, die nur wenig mit Dateien und Daten arbeiten auch vollkommen in Ordnung. Schreibt so eine App aber mal 100 Dateien ins gemockte Dateisystem, dann merkt man doch deutlich, wie langsam der JS-Debugger von Google Chrome wird. Dass zwischen zwei Breakpoints mal eben ein paar Minuten vergehen, ist auf Dauer natürlich kein Zustand. Just in diesem Moment habe ich mich wieder an die Google Chrome Developer Tools for Java erinnert.

Das ist schon eine ganz praktische Kombination, wenn man seine App im Browser laufen hat und trotzdem die Vorteile von Eclipse nutzen kann! Die Tools sind auch im Handumdrehen installiert. Man folgt einfach nur den Anweisungen auf dieser Seite und startet Chrome mit folgenden Parametern:

google-chrome --allow-file-access-from-files --disable-web-security --remote-shell-port=9222

Update: Für Mac-User lautet der Befehl:

open -a "Google Chrome" --args -allow-file-access-from-files -disable-web-security -remote-shell-port=9222

Der Port kann natürlich variiert werden. Nun muss man noch die index.html des PhoneGap Projektes in Chrome öffnen und schon kann es losgehen.

Zurück in Eclipse legt man in den Debug Configurations unter dem Punkt Chromium JavaScript einen neuen Eintrag an. Im Reiter Source sollte man noch den Pfad zu seinem assets Ordner angeben, damit man ordentlich durch den Quelltext debuggen kann. Startet man den Debugger, taucht im Projekt-Navigator ein neuer Eintrag mit dem Namen der eben angelegten Debug Konfiguration auf. In diesem Projekt findet man nun alle JS-Files des eigenen Projektes, in welchen man nun nach Belieben Breakpoints setzen kann. Arbeitet man nun mit der App im Browser springen die Breakpoints entsprechend an und man kann in Eclipse bequem durch den Code springen.

 

Update: Auf youtube findet sich ein kurzes Video, welches zeigt, wie man die tatsächlichen Source-Files zum Debuggen verwenden kann. Das virtuelle Projekt, welches automtaisch erstellt wird, ist dann uninteressant. Ich empfehle dieses Vorgehen, da sonst immer der Code genutzt wird, welcher aktuell im Browser geladen ist!

 

Auf der Google Code Seite der chromedevtools findet man noch weitere Informationen und Hilfe zum Einrichten und zur Benutzung.

Mal schauen, wie es sich damit auf Dauer arbeiten lässt 😉

 

Update: Leider kann man über Eclipse offensichtlich nicht auf localStorage zugreifen. In der Variables View wird immer undefined angezeigt. Ich habe mal einen BugReport verfasst. Greift man jedoch auf localStorage zu, wird der richtige Wert ausgelesen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.