So verwenden Sie VSCode zum Debuggen von JS-Code im Browser

Wie verwende ich VSCode, um JS-Code im Browser zu debuggen? Der folgende Artikel stellt Ihnen vor, wie Sie VSCode zum Debuggen des JS-Codes einer Webseite verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Im Vergleich zur reinen Betrachtung des Codes empfehle ich, ihn in Verbindung mit dem Debugger zu betrachten, damit wir die tatsächliche Ausführungsroute des Codes und die Änderungen in jeder Variablen sehen können. Sie können durch große Codeabschnitte springen oder eine bestimmte Logik Schritt für Schritt ausführen. [Empfohlenes Lernen: „vscode-Tutorial“]

Javascript-Code hat hauptsächlich zwei Laufumgebungen, eine ist Node.js und die andere ist der Browser. Im Allgemeinen verwende ich den Debugger von VSCode zum Debuggen von JS-Code, der auf Node.js ausgeführt wird, und ich verwende Chrome Devtools, um JS-Code zu debuggen, der im Browser ausgeführt wird. Bis ich eines Tages entdeckte, dass VSCode auch JS-Code im Browser debuggen kann, habe ich es ausprobiert und es war wirklich gut.

Wie duftend ist es genau? Werfen wir einen Blick darauf.

Im Stammverzeichnis des Projekts befindet sich eine Datei .vscode/launch.json, in der die Debugkonfiguration von VSCode gespeichert ist.

Wir klicken auf die Schaltfläche „Konfiguration hinzufügen“, um eine Debugging-Chrome-Konfiguration hinzuzufügen.

Die Konfiguration ist wie folgt:

URL ist die Adresse der Webseite. Wir können den lokalen Entwicklungsserver ausführen und die Adresse hier eingeben.

Dann klicken Sie auf „Debuggen“, um Folgendes auszuführen:

VSCode startet einen Chrome-Browser, um die Webseite zu laden und an unserem Haltepunkt anzuhalten. Der Aufrufstapel, Bereichsvariablen usw. werden im linken Bereich angezeigt.

Die unterste Ebene ist natürlich der Eingang zum Webpack. Wir können den Laufzeitteil des Webpacks in einem Schritt debuggen.

Sie können sich auch den Prozess vom Rendern, z. B. ReactDOM.render, bis zum Rendern in eine Unterkomponente ansehen und sehen, was in der Mitte geschieht.

Oder sehen Sie sich an, wie sich der Wert von Hooks einer Komponente ändert (die Werte von Hooks werden im memerizedState-Attribut des FiberNode der Komponente gespeichert):

Sie können sehen, das Webpack debuggen Laufzeitcode oder Debug-React-Quellcode oder Geschäftscode sind sehr praktisch.

Vielleicht werden Sie sagen, dass dies auch in Chrome Devtools möglich ist. Gibt es etwas Besonderes daran?

In der Tat können Chrome-Devtools das Gleiche tun, aber VSCode bietet beim Debuggen von Webseitencode zwei Hauptvorteile:

1. Sie können dem Code im Editor Haltepunkte zuweisen und den Code auch während des Debuggens ändern .

2. Durch die Verwendung derselben Tools zum Debuggen von Node.js-Code und zum Debuggen von Webseitencode kann die Erfahrung wiederverwendet werden und die Erfahrung ist konsistent.

In Bezug auf den ersten Punkt können die Quellen von Chrome Devtools den Code tatsächlich ändern und speichern, aber schließlich handelt es sich nicht um einen spezialisierten Editor, und es ist umständlicher, ihn zum Schreiben von Code zu verwenden. Ich persönlich bin eher daran gewöhnt, Code gleichzeitig zu debuggen und zu ändern, und VSCode gewinnt in dieser Hinsicht.

Wir verwenden normalerweise VSCode zum Debuggen von Node.js, aber Sie können VSCode auch zum Debuggen von Webseiten verwenden. Solange Sie mit einem Tool vertraut sind, müssen Sie nicht lernen, wie man Chrome Devtools und das Debugging verwendet Mit VSCode ist die Erfahrung schließlich besser. Der Editor, den ich jeden Tag verwende, ist bequemer, und VSCode gewinnt in dieser Hinsicht.

Aber Sie fragen sich vielleicht: Was ist, wenn ich Profilinformationen sehen möchte? Das heißt, der Zeitverbrauch jeder Funktion, der für die Analyse der Codeleistung wichtig ist.

VSCode-Debugger unterstützt dies auch:

Klicken Sie auf die Schaltfläche links, um zeitaufwändige Informationen für einen bestimmten Zeitraum aufzuzeichnen. Sie können sie manuell stoppen, eine feste Zeit angeben oder einen Haltepunkt angeben Möglichkeiten, den Ausführungsprozess eines bestimmten Codeabschnitts auszuwählen, um Profilinformationen aufzuzeichnen.

Es wird eine xxx.cpuprofile-Datei im Projektstammverzeichnis gespeichert, die die Zeit aufzeichnet, die zum Ausführen jeder Funktion benötigt wird. Es kann Schicht für Schicht den Zeitaufwand eines bestimmten Codeabschnitts analysieren, um Probleme zu lokalisieren und die Leistung zu optimieren.

Wenn Sie die VSCode-Erweiterung von vscode-js-profile-flame installieren, können Sie auch zur Flammendiagrammanzeige wechseln.

Einige Schüler verstehen Flammendiagramme möglicherweise nicht, lassen Sie es mich erklären:

Wir wissen, dass der Ausführungspfad einer bestimmten Funktion einen Aufrufstapel hat. Wir können Schritt für Schritt sehen, welche Funktion aufgerufen wird.

Aber tatsächlich gibt es nicht nur eine Funktion, die von dieser Funktion aufgerufen wird, sondern es können mehrere sein:

Der Aufrufstapel speichert nur eine Ausführungsroute zu einer bestimmten Funktion, während der Flammengraph die gesamte Ausführung speichert Routen.

Sie sehen also eine solche Gabelung im Flammendiagramm:

Tatsächlich ist dies der Ausführungsprozess:

Um eine Frage zu berechnen:

Funktion A benötigt insgesamt 50 ms und Der Aufruf von Funktion B dauert 10 ms und der Aufruf von Funktion C 20 ms. Frage: Wie viele ms benötigt der Rest der Logik von Funktion A?

? es ist wieder zeitaufwändig.

So einfach ist die Profilleistungsanalyse: einfache Addition und Subtraktion.

Die Breite jedes Kästchens im Flammendiagramm spiegelt auch den Zeitverbrauch wider und ist daher intuitiver.

Die JS-Engine verwendet eine Ereignisschleife, um JS-Code kontinuierlich auszuführen. Da das Flammendiagramm die Ausführungszeit aller Codes widerspiegelt, können Sie sehen, wie viel Zeit die Ausführung jedes Ereignisschleifencodes in Anspruch nimmt.

Die Breite jedes Streifens stellt den Zeitverbrauch jeder Schleife dar. Je dünner, desto besser, damit das Rendern nicht blockiert wird. Daher besteht das Ziel der Leistungsoptimierung darin, das Flammendiagramm in kleine dünne Balken umzuwandeln, nicht in dickere.

Zurück zum Thema: Im Vergleich zur Leistung von Chrome Devtools sind das CPU-Profil und das Flammendiagramm von VSCode tatsächlich einfacher und benutzerfreundlicher und können die meisten Anforderungen erfüllen.

Ich denke, wenn Sie keine Rendering- und Speicherinformationen sehen möchten, da VSCode dies nicht unterstützt, müssen Sie Chrome Devtools verwenden, um JS-Code zu debuggen und sich Profilinformationen und Flammendiagramme anzusehen.

Wie auch immer, ich finde VSCode ziemlich cool zum Debuggen von JS-Code auf Webseiten, was denken Sie?

Ursprüngliche Adresse: https://juejin.cn/post/7010768454458277924

Autor: zxg_Gott sagte, dass es Licht geben muss

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie VSCode zum Debuggen von JS-Code im Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!