So konfigurieren Sie VSCode, Su Shuangs Debugging-Vue- und React-Code!

Wie kann das Debuggen von Vue- und React-Code angenehmer gestaltet werden? Der folgende Artikel stellt die Konfiguration VSCode und Su Shuangs Methode zum Debuggen von Vue- und React-Code vor. Ich hoffe, dass er für alle hilfreich ist!

Als Frontend-Entwickler muss ich im Grunde jeden Tag Vue/React-Code debuggen. Ich weiß nicht, wie jeder ihn debuggt, aber ich denke, es gibt verschiedene Arten:

• Kein Debuggen, schauen Sie einfach am Code, um Probleme zu finden
• Console.log Druckprotokoll
• Verwenden Sie den Chrome Devtools-Debugger zum Debuggen
• Verwenden Sie den VSCode-Debugger zum Debuggen

Verschiedene Debugging-Methoden haben unterschiedliche Effizienz und Erfahrung Die Effizienz ist sehr gut, Erfahrung und Spaß. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Vielleicht wissen viele Schüler immer noch nicht, wie man VSCode zum Debuggen von Webseiten verwendet. Ich werde es in diesem Artikel vorstellen.

Werfen wir einen Blick auf React bzw. Vue:

Verwenden Sie VSCode zum Debuggen von React-Code

Ich habe ein Demoprojekt mit der Create-React-App erstellt, mit einer solchen Komponente:

Führen Sie den Entwicklungsserver aus:

Die vom Browser angezeigte Oberfläche sieht folgendermaßen aus:

Wie debugge ich es mit VSCode?

Wir fügen eine .vscode/launch.json-Konfigurationsdatei im Stammverzeichnis hinzu:

Erstellen Sie eine Debugkonfiguration vom Typ Chrome und geben Sie an, dass die Debug-URL die Adresse des Entwicklungsservers ist.

Fügen Sie zwei Haltepunkte in den Reaktionscode ein:

Klicken Sie dann auf Ausführen:

Schau, XDM, es ist kaputt gegangen! Es gibt Aufrufstapel, aktuelle Umgebungsvariablen usw.

Lassen Sie den Haltepunkt los und fahren Sie weiter nach unten.

Sie können das entsprechende Ereignisobjekt auch erhalten, wenn Sie auf klicken:

Ist das nicht super praktisch?

Und wenn Sie genug davon haben, Geschäfte zu schreiben, und einen Blick auf den React-Quellcode werfen möchten, klicken Sie einfach auf einen bestimmten Frame im Aufrufstapel, um Folgendes zu sehen:

Zum Beispiel wird die renderWithHooks-Methode während des Renderns aufgerufen und Das darin enthaltene workInProgress-Objekt ist der aktuelle Fiber-Knoten, sein memorizedState-Attribut ist der Ort, an dem Hooks Werte speichern:

Nach der Verwendung von VSCode zum Debuggen von React-Code macht das Debuggen von Geschäftscode oder das Betrachten von Quellcode sehr viel Spaß.

Werfen wir einen Blick auf Vue:

Verwenden Sie VSCode zum Debuggen von Vue-Code

Das Debuggen von Vue wird etwas mühsamer sein und Sie müssen einige zusätzliche Pfadzuordnungen basierend auf dem oben Gesagten vornehmen.

Weil wir in React jsx und tsx direkt schreiben, was der kompilierten js-Datei eins zu eins entspricht, aber nicht in Vue, schreiben wir Dateien im SFC-Format (Single File Component), was einen Vue-Loader erfordert Um sie in verschiedene Dateien aufzuteilen, müssen die Pfade separat zugeordnet werden, um dem Speicherort des Quellcodes zu entsprechen.

Das heißt, es gibt eine zusätzliche QuelleMapPathOverrides in der Debugging-Konfiguration:

Wie ordnet man sie also zu?

Sie können dem Quellcode einen Debugger hinzufügen und den aktuell zugeordneten Pfad im Browser überprüfen:

Hier ist webpack://test-vue-debug/src/App.vue?11c4 Zuordnungspfad, wo ist es zugeordnet?

Es ist offensichtlich dem lokalen Pfad zugeordnet, der wie folgt aussieht:

workspaceRoot ist eine von vscode bereitgestellte Umgebungsvariable, die den Pfad des Projekts darstellt. Nach einer solchen Zuordnung wird die Adresse nicht lokal Datei? Dann wird der Haltepunkt in der lokalen Datei wirksam:

Sehen Sie sich den Pfad hier an, er ist offensichtlich der Datei unter dem Projekt zugeordnet.

Aber beim Mapping steht am Ende ein Hash. Was soll ich tun? „Dieser Pfad ist konfigurierbar.“ t erweitern (Schauen Sie sich einfach an):

Wenn ich zum Beispiel den Pfad so konfiguriere:

Dann ist der Dateipfad beim Debuggen so:

Keine Sorge Schauen Sie sich zum Präfix einfach den folgenden Teil an. Wurde er dann der lokalen Datei zugeordnet? wird wirksam:

Egal ob Sie Vue-Geschäftscode debuggen oder sich den Vue-Quellcode ansehen möchten, die Erfahrung wird großartig sein.

Zusammenfassung

Als Front-End-Ingenieur müssen Sie jeden Tag Vue- und React-Code debuggen. Verschiedene Debugging-Methoden haben unterschiedliche Erfahrungen und Effizienz. Deshalb möchte ich Ihnen meine häufig verwendete Methode zum Debuggen von Webseiten mit VSCode vorstellen.

React-Debugging ist relativ einfach. Das Hinzufügen einer Chrome-Debugging-Konfiguration ist schwieriger. Wenn der Pfad einen Hash enthält, müssen Sie die Konfiguration ändern Ordnen Sie es dann zu (es muss jedoch nur einmal konfiguriert werden).

Die Verwendung von VSCode zum Debuggen von React/Vue-Code ist sehr praktisch, unabhängig davon, ob Sie Geschäftscode debuggen oder sich den Quellcode ansehen. Probieren Sie es einfach mal aus, denn das Debuggen wird sehr viel Spaß machen.

Weitere Informationen zu VSCode finden Sie unter:

vscode-Tutorial

! !

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie VSCode, Su Shuangs Debugging-Vue- und React-Code!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!