Javascript in der IDE debuggen mit Webstorm

Gleich vorweg, das Video ist nicht von mir und hat auch keinen Ton.

Nichtsdestotrotz sieht man dort sehr schön wie man mit der aktuellen Testacular Version in der aktuellen Webstorm Version Javacscript direkt in der besten Javascript IDE debuggen kann, die es momentan gibt: Webstorm.

Das ist nicht übertrieben. Die Jungs von Jetbrains sind momentan absolut führend in der Integration von Javascript in einer IDE. Wer keinen reinen Editor wie Sublime verwenden möchte sondern eine ausgewachsene sinnvoll vorkonfigurierte IDE, dem bleibt nur Webstorm.

Trotz des Videos hier nochmal die wichtigsten Konfigurationsfenster zusammengefasst. Es wird eine laufende Testacular Installation vorausgesetzt, wie das z.B. geht habe ich z.B. in meinem Artikel erklärt.

Die gesamte Konfiguration ist in 2-3 Schritten erledigt und baut auf die “Run/Debug Configurations” auf. Die sind über die Icon-Leiste erreichbar (siehe Bild).

Dort kann man zwei oder drei Konfigurationen anlegen. Drei benötigt man, wenn die Tests nicht automatisch nach jedem Speichern laufen sollen, sondern auf Knopfdruck.

Die erste Konfiguration ist der Server (siehe Bild). In dem Menü muss man über das + eine neue node.js Konfiguration anlegen. Die dort einzutragenden Werte seht ihr auf dem Bild. Die Pfade sind entsprechend anzupassen, auf dem Bild sind die Pfade für einen Mac zu sehen.

Die zweite (optional) anzulegende Konfiguration, ist die manuelle Ausführung der Tests, wenn der Server nicht automatisch loslegen soll (abhängig von der Konfiguration in der testacular.conf.js). Auch hier muss wieder eine node.js Konfiguration angelegt werden und als Startparameter für Testacular gibt man diesmal nur “run” an. Das wars schon.

Jetzt kann man bereits die Tests ausführen und man sieht die Ergebnisse in der Konsole. Wenn Fehler aufgetreten sind, sieht man dort die Dateien, die alle anklickbar sind sodass man direkt an der betreffenden Codestelle landet.

Wenn man nun noch debuggen möchte, fügt man wieder über das + und “Javascript Debug” eine “Remote” Konfiguration hinzu. Die genaue Konfiguration ist wieder auf dem Bild sichtbar. Spannend ist hier nur die Wahl des Browsers (aktuell Chrome oder Firefox) und die Remote URL. Im Fall von Testacular und dem Standardport ist das [highlight1]http://localhost:9876/base[/highlight1]

Das wars. Man kann den vorher angelegten Server nun nicht mehr nur starten, sondern über das Debug-Icon auch debuggen. Das startet den gewählten Browser und stellt eine Verbindung her. Das debugging sollte direkt funktionieren, das genaue Vorgehen sieht man in obigem Video.

[fancy_images]
[image title=”Run/Debug Configurations” caption=”Run/Debug Configurations”]http://entwicklertagebuch.com/blog/wp-content/uploads/2013/01/editconfigurations.png[/image]
[image title=”Testacular Server starten” caption=”Testacular Server starten”]http://entwicklertagebuch.com/blog/wp-content/uploads/2013/01/server.png[/image]
[image title=”Testacular Tests starten” caption=”Testacular Tests starten”]http://entwicklertagebuch.com/blog/wp-content/uploads/2013/01/run.png[/image]
[image title=”Testacular Debug Konfiguration” caption=”Testacular Debug Konfiguration”]http://entwicklertagebuch.com/blog/wp-content/uploads/2013/01/debug.png[/image]
[image title=”Testacular Server gestartet” caption=”Testacular Server gestartet”]http://entwicklertagebuch.com/blog/wp-content/uploads/2013/01/serverstarted.png[/image]
[/fancy_images]

2 thoughts on “Javascript in der IDE debuggen mit Webstorm

Leave a Reply

Your email address will not be published. Required fields are marked *

*