So implementieren Sie das Breakpoint-Debugging von Vue in Visual Studio Code

Dieser Artikel fasst die Methode und den Erfahrungsaustausch zum Breakpoint-Debugging von Vue in Visual Studio Code zusammen. Freunde in Not können sich darauf beziehen.

Viele Leute sind es gewohnt, Vue-Code im Debugging-Fenster von Chrome zu debuggen oder console.log direkt zu verwenden, um Variablenwerte zu beobachten. Dies ist eine sehr schmerzhafte Sache und erfordert das gleichzeitige Öffnen von mindestens drei Fenstern. Persönlich bin ich eher an das Debuggen von Haltepunkten gewöhnt. In diesem Artikel erfahren Sie, wie Sie Visual Studio Code und Chrome konfigurieren, um Code direkt an Haltepunkten in VS Code zu debuggen und denselben Konsolenwert in Chrome im Debugfenster von VS Code anzuzeigen.

Legen Sie den Chrome-Remote-Debugging-Port fest

Zuerst müssen wir Chrome mit aktiviertem Remote-Debugging starten, damit VS Code eine Verbindung zu Chrome herstellen kann:

Windows

• Klicken Sie mit der rechten Maustaste auf das Chrome-Verknüpfungssymbol und wählen Sie Eigenschaften aus.

• Fügen Sie in der Zielspalte am Ende hinzu --remote-debugging-port=9222 Hinweis zum Trennen von

macOS

Öffnen Sie die Konsole und führen Sie Folgendes aus:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

Öffnen Sie die Konsole und führen Sie Folgendes aus:

google-chrome --remote-debugging-port=9222

Visual Stuido Code-Installations-Plug-in

Klicken Sie auf die linke Seite Klicken Sie auf die Schaltfläche „Visual Studio Code Extension“ in der Seitenleiste, geben Sie dann Debugger für Chrome in das Suchfeld ein und installieren Sie das Plug-In, geben Sie erneut ein, klicken Sie nach Abschluss der Installation auf „Neu laden“ und starten Sie VS Code neu

Visual Studio Code hinzufügen Konfiguration

• Klicken Sie auf die Schaltfläche „Debuggen“ in der linken Seitenleiste von Visual Studio Code, klicken Sie auf das Einstellungszahnrad im Popup-Debugging-Konfigurationsfenster und wählen Sie dann „Chrome VS Code“ aus. vscode-Verzeichnis im Stammverzeichnis des Arbeitsbereichs, in dem sich eine Datei lanch.json befindet. Sie öffnet sich automatisch

• und verwendet die folgende Konfigurationsdatei, um den Inhalt zu überschreiben die automatisch generierte Datei lanch.json.

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

Ändern Sie die Quellkarte von Webpack

Wenn Sie ein Vue-Projekt basierend auf Webpack verpacken, kann es zu Problemen mit der Nichtübereinstimmung von Haltepunkten kommen, und einige Es sind Änderungen erforderlich:

• Öffnen Sie die Datei index.js im Konfigurationsverzeichnis im Stammverzeichnis

• Ändern Sie den Devtool-Wert unter dem Dev-Knoten Ändern Sie für „eval-source-map“

• den CacheBusting-Wert unter dem Entwicklungsknoten in „false“

Das Obige ist das, wofür ich kompiliert habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Rückgängig- und Wiederherstellungsfunktion in Immutable.js (ausführliches Tutorial)

So lösen Sie das iview select Das Problem falsch platzierter Dropdown-Box-Optionen, die spezifischen Vorgänge sind wie folgt

So implementieren Sie die ausgewählte Dropdown-Liste über Vue.js, die spezifischen Vorgänge sind wie folgt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Breakpoint-Debugging von Vue in Visual Studio Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!