Heim > Artikel > Web-Frontend > 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:
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!