Das JavaScript-Framework Vue.js, Teil 7 Debugging von Vue-Anwendungen

Wer beim Debugging allein auf Log-Ausgaben setzt, verschenkt auch im Vue.js-Framework Zeit und Entwicklungskomfort. Von der universell einsetzbaren JavaScript-Konsole bis zu den hoch spezialisierten Vue.js-Devtools.

JavaScript-Konsole

Das bekannteste Werkzeug für das Debugging von JavaScript-Anwendungen, egal mit welchem Framework, sind natürlich die Entwicklertools des Browsers. In Chrome findet man sie im Menü unter „Anzeigen > Entwickler > Entwicklertools“ oder einfach im Kontextmenü unter „Untersuchen“. Die Werkzeuge beinhalten verschiedene Reiter.

Während der Vue-Entwicklung empfiehlt es sich insbesondere, die Konsole stets offen und im Auge zu behalten. Hier werden eventuelle Laufzeitfehler ausgegeben. Mit der Instanz console der Klasse Console lassen sich einfache Log-Meldungen in die Browser-Konsole (bzw. in Stdout und Stderr) ausgeben. Dafür stehen verschiedene Methoden wie console.debug(), console.log(), console.error() oder console.warn() zur Verfügung.

Bildergalerie

Mit der Filterfunktion in den Entwicklertools lassen sich die Ausgaben auf bestimmte Log-Level beschränken. Selbst wenn man die Informationsflut damit unter Kontrolle bekommt – das Debuggen durch ständiges Zufügen, Löschen und Anpassen der Ausgaben ist nicht sonderlich effizient und es macht den Sourcecode schwer lesbar.

Visual Studio Code-Debugger

Eleganter als die Fehlersuche mit Log-Ausgaben ist das Verwenden eines richtigen Debuggers. Damit lässt sich der Anwendung während des Ablaufs unter die Haube schauen. Die beliebte Entwicklungsumgebung Visual Studio Code (VS Code) beinhaltet bereits einen JavaScript-Debugger, ein Plug-in ist also nicht mehr erforderlich. Um den Debugger in Betrieb zu nehmen, muss die Datei vue.config.js angepasst bzw. im Vue-Projekt angelegt werden:

Außerdem wird eine Launch-Konfiguration benötigt. Man erstellt sie, indem man in der Visual Studio Code-Activity Bar (auf der linken Seite) den Punkt „Run & Debug“ (das Icon mit Play-Pfeil und Käfer) auswählt und dort auf den Link „create a lauch.json file“ klickt. VSCode fragt daraufhin den gewünschten Browser ab und zeigt anschließend eine Default-Konfiguration an. Die wird für Chrome und Firefox wie folgt angepasst:

Danach lässt sich (bei laufendem Dev-Server) der Browser mit dem grünen Pfeil am oberen Rand in der Activity Bar im Debug-Modus starten. Wie von anderen IDEs bekannt, kann man nun Breakpoints setzen (links neben die Zeilennummern klicken), schrittweise durch den Code steppen oder Variableninhalte untersuchen.

Vue.js Devtools

Speziell für die Arbeit mit Vue wurden die Vue.js Devtools entwickelt. Es handelt sich dabei um ein Browser-Plug-in für Chrome oder Firefox, das das Debugging ganz erheblich erleichtert. Die vom Vue-Macher entwickelte Erweiterung bietet dem Entwickler eine graphische Darstellung seiner Vue-App, mit deren Hilfe sich Komponenten, Daten, Computed Properties, Events und Vuex-Actions, -Getter und -Mutationen unter die Lupe nehmen lassen. Im Moment gibt es neben der normalen Version eine Beta-Version, die (nur) Vue 3 unterstützt.

Nach der Installation des Plug-ins sollte eine laufende Vue-App erkannt werden, man sieht das an dem (dann) grünen Vue-Icon in der Liste der Erweiterungen neben dem Adressfeld des Browsers. Ist das der Fall, öffnet man die Entwicklungswerkzeuge des Browsers und findet unter dem Punkt Vue die Devtools. Dort stehen dann die beiden Bereiche „Inspector“ und „Timeline“ zur Auswahl.

Der Inspector listet unter „Components“ den ganzen Komponentenbaum der Vue-Anwendung auf (siehe Screenshot). Bewegt man die Maus über den Baum, so werden im Browser-Fenster die zugehörigen Elemente hervorgehoben. Dadurch ist ersichtlich, welche Vue-Komponente wo im Browser gerendert wird.

Mit Hilfe des Fadenkreuz-Buttons (Select Component in the page) rechts oben im Inspector (oder einfach durch Drücken der Taste S) lässt sich der Spieß umdrehen. Eine im Browser ausgewählte Komponente wird dann im Inspektor selektiert und somit schnell lokalisiert. Nach der Auswahl einer Komponente werden die zugehörigen Props, Variablen oder Computed Properties angezeigt.

Data-Variablen lassen sich bearbeiten. Selektiert man eine Komponente, deren Source-Code zur Verfügung steht, kann man mit dem Button Open in Editor auch direkt in den Quellcode springen. Weitere Ansichten zeigen die vorhandenen Routen oder lassen einen Blick in den Vuex- (oder Pinia)-Store werfen.

Unter Timeline sind auftretende Events wie Mouse- oder Keyboard-Events, aber auch Custom-Events der Komponente inklusive Payload, Router-Navigationen oder Vuex-Mutationen und -Actions als kleine Punkte auf einer Zeitachse angeordnet. Bei Auswahl eines Ereignisses werden auch hier weitere Informationen wie die genaue Uhrzeit und enthaltene Daten preisgegeben.

Logging-Befehle sind sofort einsatzbereit und jedem bekannt. Der Visual Studio Code-Debugger und das Devtool-Plug-in müssen dagegen erst eingerichtet werden und erfordern ein wenig Eingewöhnungszeit. Dieser einmalige Mehraufwand wird aber durch deutlich eine effiziente Fehlersuche mehr als aufgewogen. Die Mühe lohnt sich!

(ID:48121467)