So verwenden Sie Webstorm und Chrome zum Debuggen von Vue-Projekten

Vorwort

Bei der Projektentwicklung ist der Debug-Modus sehr wichtig. Der Debug-Modus ist für das Backend-IDEA-Tool sehr praktisch, aber für das Frontend-WebStorm müssen bei aktiviertem Debug-Modus einige Dinge separat konfiguriert werden.

Deshalb organisiere ich hier den Prozess des erfolgreichen Bauens und teile ihn. Verschiedene Webstorm-Versionen können zu unterschiedlichen Ergebnissen führen, hier also zuerst meine Version.

Webstorm-Version: 2018.3.4

1. Erstellen Sie ein neues Vue-Projekt

Um ein vollständiges Beispiel zu demonstrieren, beginnen Sie mit der Erstellung eines Projekts. Hier verwenden wir den Befehl vue scaffolding, um ein Projekt zu erstellen.

vue init webpack debug-vue

Wenn der Lauf erfolgreich ist, wird ein Vue-Projekt mit dem Namen debug-vue erstellt. Wir öffnen dieses Projekt über WebStorm und führen es aus, indem wir den Befehl starten

npm-Ausführung dev

Seite nach erfolgreichem Start anzeigen

Dies bedeutet, dass das Projekt erfolgreich ausgeführt wird. Hier fügen wir dem Code eine Schaltfläche hinzu. Wir werden später auf diese Schaltfläche klicken, um zu sehen, ob der Debug-Modus den Haltepunkt erfolgreich erreichen kann.

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <h2>Startseite</h2>
    <button @click="testMethods">Testfehler-Haltepunkt</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Hallo Welt",
  Daten () {
    zurückkehren {
      msg: „Willkommen bei Ihrer Vue.js-App“
    }
  },
  Methoden:{
    Testmethoden: Funktion () {
      alert("Klick mich an und ich melde mich")
    }
  }
}
</Skript>

Überprüfen Sie die Seite nach der Änderung erneut und sie wird folgendermaßen aussehen

Es ist offensichtlich, dass beim Klicken auf diese Schaltfläche ein Feld angezeigt wird, das angibt, dass das Klickereignis erfolgreich gebunden wurde.

2. WebStorm-Konfiguration

1. Stellen Sie den Debugger-Port ein

2. Debug-Konfiguration hinzufügen

Webstorm ist jetzt konfiguriert.

3. Testen

erster Schritt

Fügen Sie zuerst einen Haltepunkt im angegebenen Code hinzu und starten Sie dann das Projekt

Schritt 2

Starten Sie das Projekt, Befehl

npm-Ausführung dev

Nach erfolgreichem Start

Schritt 3

Starten Sie den oben konfigurierten Debug-Button

Schritt 4

prüfen

Oben finden Sie Einzelheiten zur Verwendung von Webstorm und Chrome zum Debuggen von Vue-Projekten. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!