VSCode kann den Browser nahtlos debuggen. Werfen wir einen Blick auf die Verwendung und die Prinzipanalyse!

VSCodeEpic-Update, Sie können den Browser nahtlos debuggen. Der folgende Artikel wird Ihnen helfen, diese Funktion zu verstehen, zu sehen, wie man sie verwendet, und das Prinzip kurz zu analysieren. Ich hoffe, dass er für alle hilfreich sein wird!

2021-07-16 Microsoft hat einen Blog veröffentlicht, der speziell diese Funktion vorstellt, VSCODE ist großartig!

Wenn Sie Chrome oder Edge in vscode debuggen möchten, müssen Sie zuvor Chrome Debugger oder die Microsoft Edge Debugger-Erweiterung verwenden, zwei vscode-Erweiterungen.

Und was noch wichtiger ist: Es kann nur die grundlegendsten Konsolenfunktionen bereitstellen, andere wie Netzwerk und Elemente können nicht angezeigt werden. [Empfohlenes Lernen: „vscode-Tutorial“]

Was ist diese Funktion

Nach dem Update können wir direkt open link in Chrome oder Edge in vscode und fast alles vervollständigen, z. B. Anzeigeelemente, Netzwerk usw. direkt in vscode Alle gängigen Funktionen, die zum Debuggen benötigt werden .

Screenshot des Effekts:

(Edge-Devtools)

(Debug-Konsole)

Verwendung

Die Verwendung ist sehr einfach. Zum Auslösen müssen Sie nur F5 im Front-End-Projekt drücken Debuggen und einfache Konfiguration durchführen. Hier ist eine lauch.json-Konfiguration für alle, mit der Sie den Debugging-Browser direkt öffnen können.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Jeder muss Parameter wie URL und WebRoot entsprechend seiner eigenen Situation ändern.

Prinzip

Das Prinzip ähnelt tatsächlich dem Prinzip der Chrome-Debugger-Erweiterung. Es basiert auch auf dem Devtool-Protokoll von Chrome, um Websocket-Links einzurichten. Interagieren Sie, indem Sie formatierte JSON-Daten senden, damit vscode dynamisch einige Laufzeitinformationen abrufen kann. Zum Beispiel vom Browser gesendete Netzwerk-Thread-Anfragen und DOM-Knoteninformationen.

Über das Chrome Devtool-Protokoll können Sie viele Informationen abrufen, beispielsweise die oben erwähnte Netzwerkanfrage.

Da es sich um eine vom Websocket hergestellte bidirektionale Verbindung handelt, ist es einfach, den Dom in VSCODE zu ändern und Browseränderungen auszulösen. Wir müssen nur in VSCODE (Websocket-Client) arbeiten und dann über Websocket einen Teil der JSON-Daten an den Browser (Websocket-Server) senden. Der Browser führt einige Vorgänge basierend auf den empfangenen JSON-Daten aus. Aus Sicht der Wirkung unterscheidet sich dies nicht von der direkten manuellen Vorgänge des Benutzers im Browser.

Es ist erwähnenswert, dass es viele Clients für das Chrome-Devtool-Protokoll gibt, nicht nur den NodeJS-Client, sondern auch Python, Java, PHP und andere Clients.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonVSCode kann den Browser nahtlos debuggen. Werfen wir einen Blick auf die Verwendung und die Prinzipanalyse!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!