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.
Autor:in Zum/Zur Autor:in
Nikky
Pyra
#frontend Nicole ist seit August 2020 als Frontend-Entwicklerin Teil von sum.cumo. Dabei unterstützt sie ihr Team, je nach Bedarf des Kunden und Projektes, als UI- oder Web-App-Engineer und entwickelt Frontends mit HTML und CSS oder JavaScript. Die transparente Kommunikation und der Fokus auf Weiterentwicklung sind das, was Nicole besonders an ihrer Arbeit bei sum.cumo schätzt. In ihrer vorherigen beruflichen Laufbahn war sie als Tierärztin in Kanada und Deutschland tätig und half Katzen und Hunden dabei, wieder gesund zu werden.
In ihrer Freizeit verbringt Nicole gerne Zeit mit ihrer Katze und macht als Ausgleich zum Alltag viel Yoga, geht wandern oder ist mit ihrer Familie auf Road Trips unterwegs. Alle Artikel von Nikky