Comment utiliser VSCode pour déboguer le code JS sur le navigateur

Comment utiliser VSCode pour déboguer le code JS sur le navigateur ? L'article suivant vous présentera comment utiliser VSCode pour déboguer le code JS d'une page Web. J'espère qu'il vous sera utile !

Par rapport à l'examen pur du code, je recommande de le regarder en conjonction avec le débogueur, ce qui nous permet de voir le parcours d'exécution réel du code et les changements dans chaque variable. Vous pouvez parcourir de grandes sections de code ou exécuter un certain élément de logique étape par étape. [Apprentissage recommandé : "Tutoriel vscode"]

Le code Javascript a principalement deux environnements d'exécution, l'un est Node.js et l'autre est le navigateur. De manière générale, j'utiliserai le débogueur de VSCode pour déboguer le code JS exécuté sur Node.js, et j'utiliserai les outils de développement Chrome pour déboguer le code JS exécuté sur le navigateur. Jusqu'au jour où j'ai découvert que VSCode pouvait également déboguer le code JS sur le navigateur, je l'ai essayé et c'était vraiment bien.

À quel point est-il parfumé exactement ? Jetons un coup d'oeil.

Il existe un fichier .vscode/launch.json dans le répertoire racine du projet, qui enregistre la configuration de débogage de VSCode.

Nous cliquons sur le bouton Ajouter une configuration pour ajouter une configuration Chrome de débogage.

La configuration est la suivante :

url est l'adresse de la page Web. Nous pouvons exécuter le serveur de développement local et renseigner l'adresse ici.

Ensuite, cliquez sur déboguer pour exécuter :

VSCode démarrera un navigateur Chrome pour charger la page Web et s'arrêtera à notre point d'arrêt. La pile d'appels, les variables de portée, etc. seront affichées sur le panneau de gauche.

Le niveau le plus bas est bien sûr l'entrée dans webpack. Nous pouvons déboguer en une seule étape la partie runtime de webpack.

Vous pouvez également jeter un œil au processus depuis le rendu, tel que ReactDOM.render jusqu'au rendu vers un sous-composant, et ce qui est fait au milieu.

Ou regardez comment la valeur des hooks d'un composant change (les valeurs des hooks sont stockées dans l'attribut memerizedState de fiberNode du composant) :

Vous pouvez voir, déboguer le code d'exécution du webpack , ou déboguer le code source ou le code métier de React est très pratique.

Peut-être me direz-vous, cela est également possible dans les outils de développement Chrome. Y a-t-il quelque chose de spécial à ce sujet ?

En effet, les outils de développement Chrome peuvent également faire la même chose, mais VSCode présente deux avantages principaux pour le débogage du code d'une page Web :

1. Vous pouvez donner des points d'arrêt au code dans l'éditeur, et vous pouvez également modifier le code pendant le débogage. .

2. En utilisant les mêmes outils pour déboguer le code Node.js et le code de la page Web, l'expérience peut être réutilisée et l'expérience est cohérente.

Concernant le premier point, les sources des chrome devtools permettent effectivement de modifier le code et de le sauvegarder, mais après tout, ce n'est pas un éditeur spécialisé, donc il est délicat de l'utiliser pour écrire du code. Personnellement, je suis plus habitué à déboguer et modifier du code en même temps, et VSCode gagne à cet égard.

Nous utilisons généralement VSCode pour déboguer Node.js, mais vous pouvez également utiliser VSCode pour déboguer des pages Web. Ainsi, tant que vous êtes familier avec un outil, vous n'avez pas besoin d'apprendre à utiliser les outils de développement Chrome ni le débogage. L'expérience est meilleure avec VSCode. Après tout, c'est nous. L'éditeur que j'utilise tous les jours est plus pratique et VSCode gagne à cet égard.

Mais vous pourriez vous demander : que se passe-t-il si je souhaite voir les informations de profil ? C'est-à-dire la consommation de temps de chaque fonction, ce qui est important pour analyser les performances du code.

Le débogueur VSCode prend également en charge ceci :

Cliquez sur le bouton à gauche pour enregistrer des informations chronophages pendant une période de temps. Vous pouvez l'arrêter manuellement, spécifier une heure fixe ou spécifier un point d'arrêt. façons de sélectionner le processus d'exécution d'un certain morceau de code pour enregistrer les informations de profil.

Il enregistrera un fichier xxx.cpuprofile dans le répertoire racine du projet, qui enregistre le temps nécessaire pour exécuter chaque fonction. Il peut analyser le temps nécessaire à un certain morceau de code couche par couche pour localiser les problèmes et optimiser les performances.

Si vous installez l'extension VSCode de vscode-js-profile-flame, vous pouvez également passer à l'affichage du graphique de flamme.

Certains élèves peuvent ne pas comprendre les diagrammes de flammes, laissez-moi vous expliquer :

Nous savons que le chemin d'exécution d'une certaine fonction a une pile d'appels. Nous pouvons voir quelle fonction est appelée étape par étape, qui est une ligne.

Mais en fait, il n'y a pas qu'une seule fonction appelée par cette fonction, il peut y en avoir plusieurs :

La pile d'appels n'enregistre qu'une seule route d'exécution vers une certaine fonction, tandis que le flame graph enregistre toutes les exécutions. itinéraires .

Vous verrez donc une telle bifurcation dans le graphique de flamme :

En fait, voici le processus d'exécution :

Pour calculer une question :

La fonction A prend un total de 50 ms, et il appelle la fonction B prend 10 ms, et la fonction C qu'il appelle prend 20 ms. Question : Combien de ms prend le reste de la logique de la fonction A ?

Évidemment, cela peut être calculé comme 50 - 10 - 20 = 20 ms. Peut-être pensez-vous que la fonction D prend trop de temps, alors jetez un œil au code spécifique, puis voyez s'il peut être optimisé, puis regardez. cela prend encore du temps.

C'est aussi simple que cela. C'est ainsi que l'analyse des performances du profil est effectuée, simple addition et soustraction.

La largeur de chaque case dans le graphique de flamme reflète également la consommation de temps, elle est donc plus intuitive.

Le moteur JS utilise une boucle d'événements pour exécuter en continu le code JS. Étant donné que le graphique de flamme reflète le temps d'exécution de tous les codes, vous verrez combien de temps prend l'exécution de chaque code de boucle d'événement.

La largeur de chaque bande représente la consommation de temps de chaque boucle. Bien entendu, plus elle est fine, mieux c'est, afin qu'elle ne bloque pas le rendu. Par conséquent, l’objectif d’optimisation des performances est de transformer le graphique de flamme en petites barres fines, et non plus épaisses.

Revenant au sujet, comparés aux performances des outils de développement Chrome, le profil CPU et le graphique de flamme de VSCode sont en réalité plus simples et plus faciles à utiliser, et peuvent répondre à la plupart des besoins.

Je pense qu'à moins que vous ne souhaitiez voir les informations de rendu et de mémoire, car VSCode ne le prend pas en charge, vous devez utiliser les outils de développement Chrome Pour déboguer le code JS, consulter les informations de profil et les graphiques de flamme, VSCode suffit.

Quoi qu'il en soit, je pense que VSCode est plutôt cool pour déboguer du code JS sur des pages Web, qu'en pensez-vous ?

Adresse originale : https://juejin.cn/post/7010768454458277924

Auteur : zxg_God a dit qu'il devait y avoir de la lumière

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de 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!