Conseils de débogage JavaScript Partie I – Google Chrome et l'onglet Réseau

Noah Sager

<\/HEAD>

Ce billet de blog est le premier d'une série de conseils et astuces de débogage pour vous aider dans votre parcours. <\/EM>

C'est une jungle dehors. Et que cela vous plaise ou non, c'est aussi une jungle à l'intérieur de votre application. Travailler à travers les bugs n'est pas aussi simple que de passer lentement en revue des lignes de code ; cela nécessite des outils dédiés et une curiosité sincère. Dans la jungle, la maman gorille n'a guère plus sur quoi compter que son courage et sa ruse. Mais en tant que développeur web, vous disposez d'une variété d'outils à votre disposition.  Aujourd'hui, nous allons jeter un œil à l'onglet Network dans les Developer Tools de Google Chrome.

Accéder aux Chrome Developer Tools se fait facilement en utilisant les touches de raccourci (Control + Shift + I) ou en naviguant vers le coin supérieur droit du navigateur, en cliquant sur les trois lignes horizontales grises, puis en choisissant « Tools », puis « Developer tools ».<\/A>

Contrairement à la maman gorille, Chrome Developer Tools se soucie de vous et de vos applications. Il vous aime bien. Il pense que vous êtes un très bon développeur. Mais vous devez faire un peu de travail. C'est un peu comme Esri Support. Nous vous aimons bien. Nous voulons vous aider, et nous serons là quand vous ferez le premier pas.

Pendant que les developer tools sont ouverts, vous pouvez vider le cache du navigateur simplement en cliquant et maintenant le bouton de rafraîchissement.  Cette action vous présente trois options différentes : Normal Reload<\/STRONG>, Hard Reload<\/STRONG>, et Empty Cache and Hard Reload<\/STRONG>. Ces options vous aident à garantir que les modifications apportées à votre code sont reflétées dans le navigateur. Sinon, l'application peut charger l'ancien code depuis le cache du navigateur. Quand je me sens déprimé, quelques Hard Reloads font toujours l'affaire. Si c'est vers la fin de la journée, vous voudrez peut-être vider le cache d'abord. <\/A>

Maintenant que vous avez vidé le cache et rechargé votre application, nous pouvons continuer.  Comme les developer tools dans d'autres navigateurs majeurs, tels que Firebug<\/A>, et des outils autonomes comme Fiddler<\/A>, l'onglet Network dans Chrome enregistre les requêtes individuelles générées par l'onglet actuellement ouvert dans le navigateur.  Typiquement, une variété de ressources sont chargées lorsqu'une page est rafraîchie et des requêtes supplémentaires sont exécutées pendant que l'utilisateur interagit avec la page.

L'onglet Network est mon préféré personnellement. J'ouvre toujours cet onglet avant d'exécuter toute application test. Ici, nous pouvons nous concentrer sur l'inspection du trafic web pour découvrir comment l'application interagit avec les services en ligne. S'il y a un service d'impression dans l'application, vous pouvez récupérer la webmap au format JSON dans l'onglet network, et comparer ses paramètres avec l'API REST pour voir si le JSON est valide. Vous pouvez également voir toutes les ressources que l'application consomme, et où ces ressources sont situées.

Si quelque chose a visiblement mal tourné dans l'application, les premières choses à rechercher sont les requêtes qui ont complètement échoué.  Les erreurs les plus courantes sont un 403, indiquant que vous n'avez pas la permission d'accéder à la ressource, et 404, ce qui signifie que la ressource ne peut pas être trouvée.  D'après ma propre expérience, les erreurs 404 sont le plus souvent causées par une faute de frappe que j'ai introduite lorsque j'ai écrit l'emplacement d'un service, parce que j'écris du code comme une maman gorille.<\/P>

<\/A><\/P>

Cette capture d'écran montre l'onglet Network ouvert avec une erreur 404 (Not Found) dans le trafic réseau concernant un fichier .css manquant sur le serveur nommé localhost (j'ai mis le .css dans le mauvais dossier)<\/EM><\/P>
Dans cet épisode, nous avons appris comment accéder et utiliser l'onglet Network dans Chrome Developer tools pour révéler les requêtes individuelles lancées par une application, ainsi que leur succès ou échec. Cette information peut grandement faciliter le débogage d'une application lorsque peu d'autres informations d'erreur sont disponibles en indiquant au développeur ce qui se passe en coulisses, et sur quelles zones du code concentrer son attention. Ceci conclut la première partie d'une série en plusieurs parties sur les conseils de débogage JavaScript. Rejoignez-nous la prochaine fois lorsque nous approfondirons encore plus l'onglet Network avec un exemple concret. Bon débogage !<\/P><\/BODY><\/HTML>

AndresCastillo

Noah Sager‌

It was amazing meeting you at the UC!

You are even cooler than your blogs already make you look.

I hope you don't mind.......I want to share a blog I wrote since it is along the same lines of teaching techniques on how to approach web development.

How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger
Blog Post created by Andres Castillo on Jul 24, 2019
https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger