Wie verbinde ich WebStorm mit einem externen Webserver für Debugging?
- Voraussetzungen und Überblick
- Projekt in WebStorm eröffnen und Deployment konfigurieren
- Remote Debugging-Konfiguration erstellen
- Debugging-Port und Quellpfadmapper festlegen
- Debugger aktivieren und Verbindung herstellen
- Praktisches Beispiel für Node.js-Debugging
- Zusammenfassung
Voraussetzungen und Überblick
Um WebStorm zum Debuggen einer Anwendung auf einem externen Webserver zu verwenden, müssen gewisse Voraussetzungen erfüllt sein. Zunächst muss eine Debugging-Umgebung auf dem externen Server eingerichtet sein, z.B. bei Node.js-Anwendungen das remote Debugging aktiviert oder bei PHP-Projekten ein Debugger wie Xdebug installiert. WebStorm stellt Funktionen bereit, um sich mit diesem Server zu verbinden, Quellcode mit dem laufenden Webserver zu synchronisieren und Breakpoints zu setzen. Wichtig ist, dass der externe Server per Netzwerk erreichbar ist und die Debugging-Ports freigegeben sind. Die eigentliche Verbindung in WebStorm erfolgt über sogenannte Run/Debug Configurations.
Projekt in WebStorm eröffnen und Deployment konfigurieren
Starte zuerst WebStorm und öffne dein Projekt. Um Änderungen auf den externen Webserver zu übertragen und dabei Debugging zu ermöglichen, ist es sinnvoll, das Deployment einzurichten. Der Menüpunkt dafür befindet sich unter Datei > Einstellungen > Build, Execution, Deployment > Deployment. Hier kannst du eine neue Deployment-Konfiguration hinzufügen und als Typ z.B. SFTP oder FTP auswählen, je nachdem wie du dich mit deinem Server verbindest. In den Parametern gibst du Host, Port, Benutzername und das Zielverzeichnis auf dem Server an. Mit Automatisch hochladen kannst du einstellen, ob bei Änderungen deine Dateien sofort auf dem Server aktualisiert werden.
Remote Debugging-Konfiguration erstellen
Als nächstes ist eine Run/Debug-Konfiguration notwendig, die auf deinen externen Server zeigt. Gehe im Menü auf Run > Edit Configurations und klicke auf das Pluszeichen, um eine neue Konfiguration hinzuzufügen. Je nach Art deines Projekts wählst du beispielsweise JavaScript Debug für JavaScript-Anwendungen oder PHP Remote Debug für PHP. Bei JavaScript kannst du eine URL hinterlegen, die auf den externen Server zeigt, z.B. http://dein-server.de/mein-projekt. Für Node.js kann eine Remote Node-Konfiguration nötig sein, bei der der Debug-Port des Servers eingetragen wird.
Debugging-Port und Quellpfadmapper festlegen
Sehr wichtig bei externem Debugging ist das Mapping der Quellpfade. Da der Quellcode lokal meist in einem anderen Verzeichnis liegt als auf dem Server, muss WebStorm wissen, welche lokalen Dateien zu welchen Dateien auf dem Server gehören. In der Debug-Konfiguration gibt es dazu die Einstellungen für Path Mappings. Dort ordnest du lokale Projektordner den Ordnern auf dem Server zu. Nur so können Breakpoints korrekt auf die vom Server ausgeführten Dateien angewendet werden.
Debugger aktivieren und Verbindung herstellen
Damit WebStorm überhaupt eine Debug-Verbindung zum externen Server aufbauen kann, muss auf dem Server der Debugger laufen und auf eingehende Verbindungen warten. Zum Beispiel kann bei Node.js der Prozess mit dem Flag --inspect oder --inspect-brk gestartet werden, damit WebStorm verbinden kann. Bei PHP muss beispielsweise Xdebug korrekt konfiguriert sein, damit es sich beim Aufruf an den richtigen Port verbindet. Wenn der Debugger auf dem externen Server aktiv und erreichbar ist, kannst du in WebStorm die zuvor erstellte Debug-Konfiguration starten. WebStorm baut dann die Verbindung auf, synchronisiert Quellcodeinformationen und hält an definierten Breakpoints an.
Praktisches Beispiel für Node.js-Debugging
Angenommen, du hast eine Node.js-Anwendung auf einem externen Server laufen und möchtest remote debuggen. Starte dort die Anwendung mit node --inspect=0.0.0.0:9229 app.js, damit der Debugger auf allen Interfaces an Port 9229 wartet. In WebStorm erstellst du eine Run/Debug-Konfiguration vom Typ Attach to Node.js/Chrome und als Host trägst du die IP oder Domain deines Servers ein, sowie den Port 9229. In den Path Mappings stellst du sicher, dass lokale Ordner richtig zu den Serverpfaden gemappt sind. Nach Start der Debug-Konfiguration kannst du nun Breakpoints setzen, die beim Ausführen auf dem Server greifen.
Zusammenfassung
Das Verbinden von WebStorm mit einem externen Webserver zum Debuggen erfordert vor allem: die Einrichtung eines zugänglichen Debuggers auf dem Server, die Konfiguration eines Deployments in WebStorm, das Anlegen einer passenden Run/Debug-Konfiguration mit korrekten Pfadzuweisungen und das Starten der eigentlichen Debug-Session. Solange die Kommunikationswege offen sind und Pfade stimmen, ermöglicht WebStorm komfortables Debugging auch von entfernten Servern aus.