Registrierungspflichtiger Artikel

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

Von Dr. Dirk Koller

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.

Anbieter zum Thema

Debugging einer Vue-Anwendung in Visual Studio Code.
Debugging einer Vue-Anwendung in Visual Studio Code.
(Bild: Koller / Microsoft)

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.