Teilen der Methode zum Debuggen von Vue mit Haltepunkten in Visual Studio Code

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 im Ziel Eigenschaften

• aus Fügen Sie am Ende einer Spalte --remote-debugging-port=9222 hinzu. Achten Sie darauf, sie durch Leerzeichen zu trennen
  

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-Installationsstecker -in

Klicken Sie auf die Erweiterungsschaltfläche in der linken Seitenleiste von Visual Studio Code, geben Sie dann Debugger für Chrome in das Suchfeld ein, installieren Sie das Plug-In und geben Sie es dann erneut ein Die Installation ist abgeschlossen. Klicken Sie auf „Neu laden“, um VS Code neu zu starten.

Visual Studio Code-Konfiguration hinzufügen

• Klicken Sie auf die Debug-Schaltfläche in der linken Seitenleiste von Visual Studio Code und klicken Sie auf Klicken Sie im Popup-Debug-Konfigurationsfenster auf das Einstellungszahnrad und wählen Sie dann Chrome aus. VS Code funktioniert. Generieren Sie ein .vscode-Verzeichnis im Stammverzeichnis des Bereichs. Darin befindet sich eine Datei lanch.json, die automatisch geöffnet wird 🎜>

• Verwenden Sie die folgende Konfigurationsdatei, um den Inhalt der automatisch generierten Datei lanch.json zu überschreiben.

{
 // 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 des Webpacks

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

• Ändern Sie die Dev-Knoten Ändern Sie den Devtool-Wert unter dem Dev-Knoten in „eval-source-map“

• und ändern Sie den CacheBusting-Wert unter dem Dev-Knoten in „false“

  
  

Debuggen starten

• Öffnen Sie die Remote-Debugging-Methode durch Der erste Schritt: Öffnen Sie Chrome

• Führen Sie npm run dev im Vue-Projekt aus, um das Projekt im Debugging-Modus zu starten

• Klicken Sie auf die Debug-Schaltfläche im Klicken Sie in der linken Seitenleiste von VS Code auf „An Chrome anhängen“ und klicken Sie auf die grüne Startschaltfläche. Unter normalen Umständen wird die Debugging-Steuerleiste angezeigt.

• Sie können jetzt Haltepunkte im js-Code der .vue-Datei debuggen.

Unverzichtbarer Erfahrungsaustausch zum Debuggen von js-Breakpoints

Visual Studio Code vs. Node . Detaillierte Erläuterung des Breakpoint-Debuggings mit js

Diskussion über verschiedene Methoden des Breakpoint-Debuggings in PHP

Das obige ist der detaillierte Inhalt vonTeilen der Methode zum Debuggen von Vue mit Haltepunkten in Visual Studio Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!