Que cherchez-vous ?
En construisant une application Web complexe, vous avez probablement rencontré le fait que quelque chose n’a pas fonctionné comme prévu. Vous avez passé des heures et des heures à chercher un bogue dans votre code, puis sur Internet à chercher de l’aide pour résoudre le problème. Pour vous faciliter la tâche, nous expliquons dans cet article certaines techniques efficaces de débogage d’une application Web qui réduisent considérablement la douleur du débogage et raccourcissent le temps de détection des problèmes.
Console.log
Tout d’abord, une console de méthode javascript couramment utilisée.journal. Vous pouvez insérer une méthode dans votre code avec la variable donnée. Pendant l’exécution du code, l’application retournera la valeur des variables spécifiées dans la méthode dans la console. C’est le moyen le plus simple de vérifier si le programme renvoie la valeur attendue.
Malheureusement, ce n’est pas une méthode de débogage très efficace. Une telle approche t ne nous permet pas de voir la progression de l’exécution du code (sauf si nous insérons la console.connectez-vous toutes les quelques lignes, mais la quantité de données jetées dans la console sera illisible et nous ne ferons qu’un gâchis dans le code.) De plus, il renvoie uniquement la variable passée, à condition que l’application ne génère pas d’erreur lors de l’exécution du code.
Astuce no.1
Si vous avez beaucoup de console.les journaux mettent le nom dans une chaîne et la variable suivante, par exemple, console.log (‘variable’, variable).
Outils de développement Chrome (Onglet Source)
Une méthode plus efficace pour déboguer une application Web consiste à utiliser les outils de développement Chrome et l’onglet Source. Avant de commencer le débogage dans l’onglet source, nous devons ajouter node_modules à black boxing. Nous ajoutons cette règle de sorte que lorsque vous traversez des points d’arrêt, elle ne nous montre pas les fichiers provenant de packages externes, ce qui rend le débogage difficile. Nous devons ouvrir les paramètres dans Chrome → Blackboxing → Ajouter des motifs, puis y écrire / node_modules.
Lorsque vous ajoutez node_modules à black boxing, nous pouvons accéder à l’onglet Source. Supposons que vous souhaitiez suivre en temps réel le processus de votre fonction, et vérifier les sorties. Appuyez sur Ctrl + O dans l’onglet source et entrez un nom de fichier source. Ensuite, placez les points d’arrêt sur les lignes de code qui vous intéressent, vous et vous pouvez commencer à exécuter le processus dans votre navigateur. Lorsque les lignes que vous avez sélectionnées commencent à être traitées, le navigateur arrête d’exécuter le code. Voir la capture d’écran ci-dessous.
Comme vous pouvez le voir, la ligne de code actuelle où le navigateur s’est arrêté a un fond bleu. Sur le côté droit, il y a un bar où se trouve notre centre de commande. Voici notre brève introduction.
Contrôles
En haut de la barre, vous avez la section contrôles. Concentrons-nous sur les éléments cruciaux. Le premier contrôle de reprise nous amène au point d’arrêt marqué suivant dans la portée du code en cours d’exécution. La deuxième étape de contrôle sur l’appel de fonction suivant nous amène à la ligne suivante du code en cours d’exécution. Le contrôle des derniers points d’arrêt désactivés désactive les points d’arrêt sélectionnés. C’est un contrôle utile lorsque de nombreux points d’arrêt sont sélectionnés et que nous voulons revenir à cliquer sur l’application pendant un certain temps sans faire de pause à chaque point d’arrêt.
Portées
Nous avons une section portée ci-dessous. Nous avons plusieurs types de portées: locales (la fonction actuellement exécutée) et des fermetures en fonction de la portée dans laquelle nous nous trouvons (par exemple, le parent de la fonction actuellement exécutée ou d’un composant). Dans chacune de ces étendues, le navigateur nous montre toutes les variables qui s’y trouvent.
Points d’arrêt
La dernière section discutée concerne les points d’arrêt. Il montre quels points d’arrêt et dans quels fichiers sont marqués. En utilisant des cases à cocher, nous pouvons facilement les désactiver et les réactiver.
Conseils non. 2-5
- Si vous utilisez immuable.js dans votre projet, installez l’Immuable.plugin js Object Formatter et activez-le dans les paramètres du navigateur. Cela simplifiera considérablement le débogage des objets immuables.
- Si vous n’utilisez pas immuable.js dans votre projet et que vous utilisez du code Visual Studio commeE, Nous vous recommandons fortement d’installer et de configurer le débogueur pour Chrome (VSC n’a pas de code immuable.plugin de formatage js). Il simplifie encore plus le débogage et permet des changements de code plus rapides.
- Si l’onglet source n’affiche pas vos fichiers locaux, vérifiez la carte source dans votre projet.
- Lorsque le navigateur s’arrête sur un point d’arrêt, vous avez également accès aux variables dans la console.
Outils de développement React
Les outils de développement React sont également des solutions utiles. Ces outils vous permettent de visualiser facilement l’arborescence de React dans votre projet, les états et les accessoires du composant. La fonction Sélectionner un élément dans la page pour l’inspecter est puissante, surtout lorsque vous ne connaissez pas l’ensemble du projet. Il vous aide à trouver le composant dont vous avez besoin pour mettre à jour.
Astuce n° 6
Si vous utilisez Vue.js, vous pouvez utiliser Vue.js devtools. L’extension a des fonctions et un accès similaires à Vuex (l’équivalent de redux dans react).
Redux DevTools
Si vous utilisez Redux dans votre projet, Redux DevTools est un must-have. Une telle solution vous permet de suivre le flux complet des actions, les changements d’état, la charge utile et d’afficher le magasin actuel après chaque action effectuée. Si quelque chose ne fonctionne pas comme nous le supposons et que tout semble bien dans le code, il convient de considérer quelles actions sont envoyées, avec quelle charge utile. Parfois, il y a des erreurs simples comme copier la constante de l’action ci-dessus, renommer sans changer la valeur, puis appeler quelque chose de complètement différent. Vous trouverez ci-dessous un GIF montrant les fonctions les plus importantes de Redux DevTools.
Numéro de pointe. 7
Si votre application exécute un grand nombre d’actions, l’extension peut ne pas fonctionner correctement en raison d’une mémoire insuffisante pour traiter autant d’actions. Vous pouvez essayer de le configurer dans les options d’extension (dans ce cas, l’option maxAge.)
Fiddler
Le dernier outil que nous aimerions présenter est Fiddler. L’outil a été créé pour gérer le trafic réseau. C’est extrêmement utile lorsque nous avons des bugs de production et que nous ne pouvons pas copier les données de production dans un environnement inférieur pour déboguer localement. Dans une telle situation, pour avoir accès aux données de production dans l’environnement local, nous définissons le trafic dans l’onglet Répondeur automatique. Lorsque vous ouvrez la page, au lieu de télécharger le fichier js depuis le serveur, Fidler connecte notre fichier de production construit localement. Un débogage supplémentaire est effectué dans l’onglet source des outils de développement chrome. Vous trouverez ci-dessous une capture d’écran avec le paramètre permettant de rediriger le trafic vers le fichier local. Le programme permet également de simuler des points de terminaison.
Astuce n ° 8
Si vous souhaitez créer des simulacres de points de terminaison de manière simple et rapide, vous pouvez utiliser un programme de simulation de lune.
Résumé d’un débogage agile d’une application web
Pour beaucoup d’entre nous, le processus de débogage d’une application web est associé à un mal de tête et à de longues heures passées devant l’ordinateur. Cependant, ce processus peut être raccourci et rendu plus agréable si vous disposez des bons outils et du savoir-faire pour les utiliser. Souvent, ils sont à portée de main et gratuitement. Nous avons partagé avec vous les outils les plus importants et les plus utiles que nous utilisons quotidiennement.