Heim > Artikel > Web-Frontend > 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 🎜>
{ // 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
Debuggen starten
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!