Comment configurer VSCode, le code de débogage Vue et React de Su Shuang !

Comment rendre le débogage du code Vue et React plus agréable ? L'article suivant présente la configuration VSCode et la méthode de débogage du code Vue et React de Su Shuang. J'espère qu'il sera utile à tout le monde !

En tant que développeur front-end, je dois essentiellement déboguer le code Vue/React tous les jours. Je ne sais pas comment tout le monde le débogue, mais je suppose qu'il en existe plusieurs types :

• Pas de débogage, il suffit de regarder. dans le code pour trouver des problèmes
• console.log print log
• Utilisez le débogueur Chrome Devtools pour déboguer
• Utilisez le débogueur VSCode pour déboguer

Différentes méthodes de débogage ont une efficacité et une expérience différentes. Maintenant, j'utilise essentiellement le débogueur VSCode pour déboguer, et. l'efficacité est très bonne, l'expérience et le plaisir. [Apprentissage recommandé : "Tutoriel d'introduction à vscode"]

Peut-être que de nombreux étudiants ne savent toujours pas comment utiliser VSCode pour déboguer des pages Web, je vais le présenter dans cet article.

Regardons respectivement React et Vue :

Utilisez VSCode pour déboguer le code React

J'ai utilisé create-react-app pour créer un projet de démonstration avec un tel composant :

Exécutez le serveur de développement :

L'interface affichée par le navigateur est la suivante :

Comment le déboguer avec VSCode ?

Nous ajoutons un fichier de configuration .vscode/launch.json dans le répertoire racine :

Créez une configuration de débogage, le type est chrome, et précisez que l'url de débogage est l'adresse du serveur de développement.

Mettez deux points d'arrêt dans le code de réaction :

Puis cliquez sur exécuter :

Ecoute, XDM, c'est cassé ! Il existe des piles d'appels, des variables d'environnement actuelles, etc.

Relâchez le point d'arrêt et continuez à descendre.

Vous pouvez également obtenir l'objet événement correspondant en cliquant :

N'est-ce pas super pratique !

Et lorsque vous en avez assez d'écrire des affaires et que vous souhaitez voir le code source de réaction, cliquez simplement sur un certain cadre dans la pile d'appels pour voir :

Par exemple, la méthode renderWithHooks sera appelée pendant le rendu, et l'objet workInProgress à l'intérieur se trouve le nœud de fibre actuel, son attribut memorizedState est l'endroit où les hooks stockent les valeurs :

Après avoir utilisé VSCode pour déboguer le code React, l'expérience du débogage du code métier ou de la consultation du code source est très agréable.

Jetons un coup d'œil à Vue :

Utilisez VSCode pour déboguer le code Vue

Le débogage de Vue sera un peu plus gênant et vous devrez effectuer un mappage supplémentaire des chemins en fonction de ce qui précède.

Parce que dans React nous écrivons directement jsx et tsx, ce qui correspond au fichier js compilé un à un, mais pas dans Vue. Dans Vue, nous écrivons des fichiers au format SFC (single file composant), et nous avons besoin de vue-. chargeur pour les diviser en différents fichiers, les chemins doivent donc être mappés séparément pour correspondre à l'emplacement du code source.

C'est-à-dire qu'il existe un sourceMapPathOverrides supplémentaire dans la configuration de débogage :

Alors, comment le mapper ?

Vous pouvez ajouter un débogueur au code source et vérifier le chemin mappé actuel dans le navigateur :

Voici webpack://test-vue-debug/src/App.vue?11c4 Chemin de mappage, où se trouve il est mappé ?

Il est évidemment mappé au chemin local, qui ressemble à ceci :

workspaceRoot est une variable d'environnement fournie par vscode, qui est le chemin du projet. Après un tel mappage, l'adresse ne devient-elle pas locale. déposer? Ensuite, le point d'arrêt dans le fichier local prendra effet :

Regardez le chemin ici, il est évidemment mappé au fichier sous le projet.

Mais lors du mappage, il y a un hachage à la fin. Ce hachage va changer. Que dois-je faire ?

Ce chemin est configurable. Il s'agit en fait du chemin du fichier lorsque webpack génère le sourcemap. Il peut être configuré via output.devtoolModuleFilenameTemplate :

Vous pouvez voir la documentation des variables disponibles, donc je ne le ferai pas. Je ne les développe pas (il suffit de jeter un oeil) :

Par exemple, si je configure le chemin comme ceci :

Ensuite, le chemin du fichier pendant le débogage est comme ceci :

Ne vous inquiétez pas à propos du préfixe, regardez simplement la partie suivante. N'est-il pas supprimé ? A-t-il été haché ? Ensuite, mappez-le au fichier local :

De cette façon, il est à nouveau mappé et le point d'arrêt dans vscode le sera. prendre effet :

Que vous souhaitiez déboguer le code métier Vue ou consulter le code source de Vue, l'expérience sera formidable.

Résumé

En tant qu'ingénieur front-end, le débogage du code Vue et React est quelque chose que vous devez faire chaque jour. Différentes méthodes de débogage ont une expérience et une efficacité différentes. Je souhaite donc vous présenter ma méthode couramment utilisée pour déboguer des pages Web avec VSCode.

Le débogage de React est relativement simple. Il suffit d'ajouter une configuration de débogage de type Chrome. Le débogage de Vue est plus gênant. S'il y a un hachage dans le chemin, vous devez modifier la configuration du chemin généré et. puis mappez-le (mais il ne doit être configuré qu'une seule fois).

Utiliser VSCode pour déboguer le code React/Vue est très pratique, que vous débogiez du code métier ou que vous examiniez le code source. Autant l'essayer, cela rendra le débogage très agréable.

Pour plus de connaissances sur VSCode, veuillez visiter :

Tutoriel vscode

 ! !

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!