VSCode peut déboguer le navigateur de manière transparente. Jetons un coup d'œil à l'utilisation et à l'analyse des principes !

VSCodeMise à jour épique, vous pouvez déboguer le navigateur en toute transparence. L'article suivant vous amènera à comprendre cette fonction, à voir comment l'utiliser et à analyser brièvement le principe. J'espère qu'il sera utile à tout le monde !

2021-07-16 Microsoft a publié un blog présentant spécifiquement cette fonctionnalité, VSCODE est génial !

Avant cela, si vous souhaitez déboguer Chrome ou Edge dans vscode, vous devez utiliser Chrome Debugger ou l'extension Microsoft Edge Debugger, deux extensions vscode.

Et plus important encore, il ne peut fournir que les fonctions les plus basiques de la console. D'autres, comme le réseau et les éléments, ne peuvent pas être visualisés. [Apprentissage recommandé : "tutoriel vscode"]

Qu'est-ce que cette fonction

Après la mise à jour, on peut directement open link en chrome ou edge en vscode, et compléter presque tout comme la visualisation d'un élément, d'un réseau, etc. directement dans vscode Toutes les fonctions courantes nécessaires au débogage .

Capture d'écran de l'effet :

(edge ​​​​devtools)

(console de débogage)

Comment utiliser

L'utilisation est très simple Il vous suffit d'appuyer sur F5 dans le projet front-end pour déclencher le débogage et. effectuer une configuration simple. Voici une configuration lauch.json pour tout le monde. Avec elle, vous pouvez ouvrir directement le navigateur de débogage.

{
  "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}"
    }
  ]
}

Chacun doit modifier des paramètres tels que l'url et webRoot en fonction de sa propre situation.

Principe

Le principe est en fait similaire au principe de l'extension du débogueur Chrome. Il est également basé sur le protocole devtool de Chrome pour établir des liens websocket. Interagissez en envoyant des données json formatées, afin que vscode puisse obtenir dynamiquement des informations d'exécution. Par exemple, les requêtes envoyées par le thread réseau du navigateur et les informations sur le nœud DOM.

Vous pouvez obtenir de nombreuses informations via le protocole Chrome devtool, comme la requête réseau mentionnée ci-dessus.

Puisqu'il s'agit d'un lien bidirectionnel établi par websocket, il est facile de changer le dom dans VSCODE et de déclencher des modifications du navigateur. Il nous suffit d'opérer en VSCODE (client websocket), puis d'envoyer une donnée JSON au navigateur (serveur websocket) via websocket. Le navigateur effectuera certaines opérations basées sur les données JSON reçues. En termes d'effet, cela n'est pas différent de l'opération manuelle de l'utilisateur directement dans le navigateur.

Il convient de noter qu'il existe de nombreux clients pour le protocole Chrome devtool, pas seulement les clients NodeJS, mais aussi Python, Java, PHP et d'autres clients.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!