Einführung in Vue Devtools

Wenn Sie mich bitten würden, die Dinge aufzulisten, ohne die ich als Vue-Entwickler nicht leben kann, würde ich Folgendes sagen:

• Kaffee
• Vue Devtools

Vue Devtools bietet Entwicklern eine benutzerfreundliche Lösung zum Debuggen und Interagieren mit Vue-Anwendungen. Es ist als Chrome-Erweiterung, Firefox-Addon oder als eigenständige Electron-Anwendung erhältlich, die mit jedem Browser funktioniert. Nach der Installation können Vue-Anwendungen im Entwicklungsmodus über die Registerkarte Vue in den Entwicklertools des Browsers überprüft werden.

Was die Vue-Devtools für Sie tun können

• Das Komponenten-Panel bietet einen Überblick über alle Komponenten auf einer bestimmten Seite mit ihren jeweiligen Requisiten, Daten und berechneten Eigenschaften. Die Werte im Panel ändern sich dynamisch durch typische Benutzerinteraktionen mit der Seite. Es ist auch möglich, Datenwerte im Panel zu bearbeiten, um in Echtzeit zu sehen, wie sich diese Änderungen auf die Seite auswirken.
• Benutzer von Vuex für die Zustandsverwaltung können die Vorteile des Vuex-Panels nutzen, in dem Zustandsänderungen im Laufe der Zeit angezeigt und rückgängig gemacht werden können. Der Zustand kann auch durch Ändern der Werte im Panel aktualisiert werden.
• Durch einfaches Klicken auf "Aufzeichnen" können benutzerdefinierte Ereignisse im Ereignis-Panel überwacht werden, um zu sehen, ob sie während der Benutzerinteraktion mit der Seite angemessen ausgegeben werden.
• Die Routen-Navigationshistorie eines Benutzers sowie Informationen über alle Routen in der Anwendung können auf der Registerkarte "Routing" angezeigt werden.
• Die allgemeine Anwendungsleistung sowie die Leistung einzelner Komponenten kann in Echtzeit über die Registerkarten "Frames pro Sekunde" und "Komponenten-Rendering" im Fenster "Leistung" überwacht werden.

Weitere Informationen findet ihr im GitHub-Repository von Vue Devtools.