Beschleunigen Sie die Entwicklung mit Vue DevTools

Verwenden Sie console.logs immer noch zum Debuggen Ihrer Vue.js-Apps? Vue verfügt über ein spezielles Plugin, mit dessen Hilfe Sie Ihre Entwicklung beschleunigen können. Es ersetzt Ihre Protokolle nicht, sondern ergänzt sie. Es heißt Vue DevTools und hier sind drei Möglichkeiten, mit denen Sie die Entwicklung Ihrer Vue-Apps beschleunigen können.

Installieren des Vue DevTools-Plugins

Bevor wir loslegen, gibt es 3 Versionen der DevTools, die Sie je nach Ihrer Umgebung installieren können. Es gibt ein Chrome-Plugin, ein Firefox-Addon und sogar eine Electron-App (funktioniert mit Mac, Linux und Windows), die Sie ebenfalls herunterladen können.

Klicken Sie hier, um die spezifischen Installationsanweisungen für jede Version des Plugins auf der Seite "DevTools GitHub" anzuzeigen.

Sobald Sie das Plugin installiert haben, öffnen Sie die Entwicklertools Ihres Browsers und öffnen Sie das Vue DevTools-Plugin auf einer Seite, die die Entwicklungsversion von Vue verwendet. In den VueJS-Dokumenten wird beispielsweise die Entwicklungsversion von Vue verwendet.

Kommen wir nun zu den drei Möglichkeiten, mit denen Sie mit den Vue DevTools die Entwicklungszeit Ihrer Anwendungen beschleunigen können.

1. Live bearbeiten Sie Ihre Komponentendaten

Eine sehr praktische Funktion der Vue DevTools ist die Live-Bearbeitung der Daten Ihrer Komponente. Auf diese Weise können Sie verschiedene Varianten Ihrer Komponente schnell testen.

Sie befinden sich nicht in Ihrer IDE und ändern Komponentenwerte in Ihrem Code manuell. Stattdessen können Sie mit der Live-Bearbeitung von Komponentendaten den gesamten Änderungs-, Aktualisierungs- und Aktualisierungsvorgang in Ihrer IDE überspringen, um Ihre Entwicklungszeit zu verkürzen.

Um die Daten Ihrer Komponente live zu bearbeiten, klicken Sie zunächst im Komponentenfenster der Vue DevTools auf die Komponente, die Sie bearbeiten möchten. Nach dem Klicken wird eine Registerkarte mit allen Daten angezeigt, auf die die Komponente zugreifen kann. Sie können Textwerte bearbeiten, Boolesche Werte einfach ein- und ausschalten, Zahlen inkrementieren und sogar Werte zu einem Array hinzufügen.

Das Live-Bearbeiten der Daten einer Komponente funktioniert auch dann, wenn Sie eine Remote-API zum Abrufen Ihrer Daten verwenden. Sobald Ihre Daten vom Server stammen und geladen wurden, können Sie sie im Bereich Vue DevTools-Komponenten bearbeiten.

2. Debuggen Sie Vuex mit Time Travel

Vue DevTools fügt sich nahtlos in die Vuex-Zustandsverwaltungsbibliothek ein, indem es die Vorhersagbarkeit visualisiert.

Die Vuex-Statusverwaltungsbibliothek ist ein zentraler Objektspeicher für alle Komponenten in Ihrer Vue.js-Anwendung. Dieser Speicher kann nur auf vorhersehbare Weise mutiert werden, indem Funktionen zum Erstellen neuer Versionen Ihres Status verwendet werden, anstatt Werte direkt zu ändern.

Auf diese Weise können Sie das so genannte Zeitreise-Debugging durchführen. Mit den Vue DevTools können Sie problemlos durch frühere Versionen Ihres Vuex-Statusobjekts blättern.

Um auf diesen Teil der Tools zuzugreifen, klicken Sie zunächst auf das Vuex-Uhrensymbol. Hier können Sie alle verschiedenen Mutationen durchgehen, die in Ihrer Anwendung aufgetreten sind. Klicken Sie nach dem Bewegen des Mauszeigers über eine Mutation auf die Schaltfläche Zeitreise, um zu diesem Status zurückzukehren.

Eine weitere praktische Funktion von Vue DevTools für Vuex ist das Exportieren und Importieren ganzer Statusobjekte. Dies kann hilfreich sein, um ein Problem zu beheben, das ein Benutzer hat und das Sie nicht wiederherstellen können.

3. Verfolgen Sie die benutzerdefinierten Ereignisse Ihrer App

Wenn Sie Ereignisse in Ihrer Anwendung verwenden, können Sie diese auf der Registerkarte "Ereignisse" der Vue DevTools nachverfolgen.

Auf diese Weise können Sie die Ereignisse Ihrer App verfolgen, es werden jedoch nur die benutzerdefinierten Ereignisse Ihrer App angezeigt, z. Diejenigen, die Sie selbst damit ausgeben. $ emit ('myEvent'), und nicht diejenigen, die nativ an die Komponente gebunden sind, wie v-on: click oder v-on: keyup.

Klicken Sie in den Vue DevTools im Bereich "Ereignisse" auf, um die benutzerdefinierten Ereignisse Ihrer Apps zu verfolgen. Klicken Sie anschließend auf die Schaltfläche "Aufzeichnen". Ihre benutzerdefinierten Ereignisse werden im linken Fensterbereich angezeigt, während Sie Ihre Anwendung durchlaufen.

Erfahren Sie mehr über die Vue DevTools

Mit den Vue DevTools können Sie auf drei Arten Ihre Entwicklung beschleunigen. Es gibt noch viel mehr, das Sie beim Debuggen unterstützen kann.

Weitere Informationen zu den Funktionen von The Vue DevTools finden Sie in den Informationen zu den Neuerungen von Vue DevTools 4.0 unter The Vue Point.

Wenn Sie Probleme mit der Installation haben, besuchen Sie das Vue DevTools Github-Repo.

Abonnieren Sie unseren Newsletter und erhalten Sie unseren kostenlosen Vue Essentials-Spickzettel!

Weiter lesen

  • So erstellen Sie Vue.js-Übergänge
  • 10 Gründe für die Verwendung von Nuxt.js
  • Best Practices für Nuxt.js SEO