Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Moderne Webanwendungen mit Node.js und Express.js

Debugging

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Machen Sie sich vertraut, wie mit der Entwicklungsumgebung Webstorm schnell Fehlern auf den Grund gegangen ist.

Transkript

Fehlersuche ist ein mühseliger Vorgang, und allzu oft funktionieren Dinge nicht auf Anhieb. Der klassische Weg, über Konsole entsprechend Zustände der Anwendung zu bestimmen, ist unter Umständen sehr aufwändig und entspricht nicht den Konventionen moderner Anwendungsentwicklung. Mithilfe der Entwicklungsumgebung Webstorm und der Node.JS-Plattform zeige ich Ihnen nun, wie Sie Fehlersuche zukünftig deutlich komfortabler gestalten können, als auch wie Sie, während die Fehlersuche läuft, entsprechende Änderungen an Ihrer Anwendung vornehmen können. Ich befinde mich hier nun also in meiner Node.JS-Anwendung, die ich aktuell regulär ausführe. Ich beende diesen Vorgang und wähle nun den Käfer, der für Debugging steht, um die Anwendung neu zu starten. In dem Moment taucht eine neue Meldung auf, dass der Debugger aktuell auf diesem Port auf eine Verbindung wartet. Und die Entwicklungsumgebung klinkt sich automatisch entsprechend in diesen Debugger ein. Ich habe nun die Möglichkeit, zu sehen, welche Scripte von dem Node.JS-System aktuell geladen sind. Das sind zum einen die Basismodule von Node.JS, die ich auch über einen Doppelklick entsprechend anschauen kann, als auch die aus meinem Projekt befindliche JavaScript-Datei index.js. Innerhalb der Konsole kann ich nun auch diverse JavaScript-Operationen vornehmen, beispielsweise könnte ich eine Variable deklarieren, die den Namen "test" trägt und einen String enthält. In ähnlicher Form kann ich diese Variable auch auswerten und auf die Konsole zurückschreiben. All diese Dinge werden unmittelbar in meiner Node.JS und im Kontext meiner Anwendung ausgeführt. Das bedeutet, wenn ich hier neue Variablen definiere und auf diese innerhalb meiner JavaScript-Datei referenziere, so würden diese auch entsprechend den neuen Wert erhalten. Innerhalb des Debuggers sehe ich zum aktuellen Zeitpunkt nichts Besonderes, als dass die Verbindung zum Server steht. Ich kehre also nun in meine Anwendung zurück und setze einen sogenannten Breakpoint. Das ist relativ einfach, indem ich auf der linken Seite neben der Zeile, die mich interessiert, klicke, und diese wird dann entsprechend rot markiert. Kehre ich nun in meine Web-Anwendung zurück und klicke auf den Refresh-Button, so lädt die Seite nun nicht mehr vollständig und wartet auf eine Antwort. Innerhalb meiner Anwendung sehe ich nun, dass die entsprechende Zeile blau markiert wurde und der Node.JS-Server hier Pause eingelegt hat, um auf meine Eingaben zu warten. Ich sehe also zum aktuellen Zeitpunkt den Inhalt der Variable "path" als auch das Objekt "request", das als Parameter hineingegeben wurde, als auch die Server-Response, die ich zurückgeben werde, und das "this"-Objekt, das den entsprechenden HTTP-Server bezeichnet. Ich kann nun durch einen Drilldown entsprechend feststellen, welche Werte sich hier befinden. Beispielsweise innerhalb der Header sehe ich nun, welche Anfrage der Browser geschickt hat, und welchen User-Agent er beispielsweise vorliegen hat. Mit diesen Informationen kann ich nun weiterarbeiten, um einem Problem auf den Grund zu gehen. Beispielsweise könnte ich nun feststellen, ob die path-Variable den Inhalt enthält, den ich erwarten würde. Da ich aktuell den leeren Ordner aufgerufen habe, habe ich auch entsprechend die Erwartung, dass innerhalb von "path" nichts steht, sodass die index.html aufgerufen wird. Ich habe nun die Möglichkeit, über einen Rechtsklick entsprechend den "Set Value" auszuführen und den Wert der Variable zum aktuellen Zeitpunkt zu verändern. Beispielsweise in den Wert "test", was aber unter gewissen Umständen auch nicht funktioniert. Da beispielsweise der Wert von "path" durch das aktuelle Statement benötigt wird, kann ich diesen so nicht verändern. Auf der Konsole kann ich beispielsweise nun auch den Wert von "path" auslesen, der hier wiederum aktuell leer ist. Das bedeutet, alles, was ich auf der Konsole tue, bezieht sich auf den aktuellen Kontext, an dem Pause gemacht wurde. Wenn ich nun weiter durch den Code springen möchte, kann ich das mit den entsprechenden Buttons "Step Into" - das bedeutet, immer wenn eine Funktion aufgerufen wird, wird auch innerhalb dieser Funktion gegangen - als auch "Step Over". Entsprechend F7 und F8. Wenn ich nun also F7 drücke, so werde ich weitergeleitet zum Fall, dass kein Inhalt in der Variable steht, und kann nun in die Funktion selbst hineingehen oder mit F8 die Funktion überspringen. Ich drücke entsprechend die F7-Taste, komme nun in die Funktion und kann den Verlauf der Funktion nachvollziehen. Anhand der unterschiedlichen Ausprägungen lässt sich so für mich einfach nachvollziehen, warum bestimmte Dinge passieren oder auch nicht passieren. Sollte ich mich für eine Variable nachhaltig interessieren, so kann ich zum Beispiel diese zu den Watches hinzufügen. Das bedeutet, egal an welchem Punkt der Anwendung ich mich befinde, ich muss nicht über die entsprechende Navigation, beispielsweise auch hier tiefer in das Objekt hineingehen, sondern ich kann über die Watches entsprechend immer den aktuellen Wert nachvollziehen. Aktuell habe ich mich in die Funktion readStaticFileToRes begeben, das bedeutet, links im Reiter "Frames" sehe ich, dass aus der Codezeile 23 index.js in die Codezeile 6 von readStaticFileToRes gesprungen wurde. Und so lässt sich für mich auch nachvollziehen, welches Resultat letztendlich der Aufruf meiner aktuellen Funktion ist. Und über die Steuerung sehe ich, aus welchem Fall heraus entsprechend die Variablen vorgelegen haben, die dazu geführt haben, dass die Funktion ausgeführt wurde. Interessant ist auch, dass mein Watch-Fenster entsprechend reagiert hat und die Variable "responseCode" in diesem Fall nicht vorliegt und zu einem Reference-Error führt. Möchte ich, dass meine Anwendung nun regulär weiterläuft, kann ich das mit dem Play-Button bestätigen. Ich erhalte nun noch einmal einen Haltepunkt, denn der Server versucht noch einmal, die Seite aufzurufen. Da der Browser aktuell sehr lange warten musste, hat er quasi den Aufruf nochmal aktualisiert und nun fragt er den tatsächlichen Inhalt ab, also die Grafik-Datei, die entsprechend nun über den Case "img/logo.jpg" abgedeckt wird und hier auch wieder die Funktion weiterleitet. Standardmäßig fragt der Browser zusätzlich auch den Favoriten-Icon ab, den ich an dieser Stelle nicht bereitstelle. Nun ist die Anfrage beendet und der Browser hat alle Inhalte bekommen, die er erwartet hat. In manchen Fällen kann es sehr mühselig sein, sich mit jeder Anfrage auseinanderzusetzen, weshalb es Sinn machen kann, durch einen Rechtsklick auf den Breakpoint eine sogenannte Bedingung zu setzen. Beispielsweise kann es sein, dass ich mich nur für den Aufruf interessiere, in dem entsprechend die Datei "/img/logo.jpg" angefragt wird. Das bedeutet, nur dann, wenn tatsächlich diese Bedingung zutrifft, wird auch hier der Switch bzw. der Breakpoint getroffen, ansonsten wird der Code immer regulär durchlaufen. In den letzten Minuten habe ich Ihnen also eine unabdingliche Komponente eines jeden Node.JS-Entwicklers gezeigt. Mithilfe der Fehlersuche innerhalb von Webstorm haben wir Breakpoints gesetzt, Variablen-Zustände geändert oder auch ändern können, als auch Bedingungen für Breakpoints bestimmt, sodass Breakpoints nicht immer getroffen werden. Zu guter Letzt habe ich Ihnen die Konsole vorgestellt, mit der Sie auch Änderungen an Ihrem Code, üblich wie es in Java-Code möglich ist, vornehmen können.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!