Conseils de débogage JavaScript Partie III 6 Outils avancE9s pour dE9veloppeurs Google Chrome

Noah Sager

<\/HEAD>Ce billet de blog est le troisième d'une série d'astuces et conseils pour le débogage JavaScript afin de vous aider en chemin. Voir Conseils de débogage JavaScript Partie I<\/A><\/STRONG> et aussi Conseils de débogage JavaScript Partie II<\/A> <\/STRONG><\/EM>pour nos segments précédents.<\/EM>

Dans les deux précédents billets sur les conseils de débogage JavaScript sur le blog Esri Support, nous avons examiné l'onglet Réseau et l'onglet Console dans le cadre des Outils de développement Google Chrome<\/A><\/STRONG>. Bien que la plupart des navigateurs modernes disposent d'une forme d'outils de développement, ici nous utilisons Chrome pour nos exemples.

Notre objectif pour ce troisième billet de blog dans la série est d'introduire des astuces et conseils plus avancés pour vous permettre de déboguer et dépanner votre code JavaScript plus efficacement. Plus précisément, nous nous concentrerons sur trois domaines : un meilleur affichage des messages dans la console, de meilleures façons de définir des points d'arrêt avec des conditions spécifiées à l'exécution, et une méthode plus efficace pour avancer pas à pas dans les points d'arrêt dans l'onglet Sources avec une méthode appelée blackboxing.Partie 1 : Console.table<\/STRONG><\/SPAN>

Console.log est notre fonction principale de débogage, mais la sortie de cette fonction peut être un peu difficile à lire (surtout lorsqu'on visualise beaucoup de données). Une façon d'améliorer nos messages dans la console et de visualiser les données plus facilement est d'afficher une liste d'objets sous forme de tableau, ce qui est réalisé avec la fonction console.table <\/STRONG>. Cette fonction prend un argument obligatoire, qui doit être un tableau ou un objet, et un paramètre optionnel supplémentaire. Chaque élément du tableau constitue une ligne du tableau.

Jetons un œil à l'exemple Console Table<\/A><\/STRONG>.

1. Ouvrez les outils de développement Chrome en utilisant les raccourcis clavier (Windows : Control + Shift + I, et Mac : Command + Option + I), ou en naviguant vers le panneau en haut à droite du navigateur, en cliquant sur les trois points verticaux gris, puis en choisissant « Plus d’outils » > « Outils de développement ».

2. Sélectionnez l'onglet console.

3. Cliquez sur « Effectuer la requête » dans l'application exemple. Cela exécute une tâche de requête pour voir tous les comtés du Connecticut. Le code utilise console.table<\/STRONG> pour afficher les résultats sous forme de tableau comme montré ci-dessous.<\/A>

console.table<\/P><\/DIV>

Chaque ligne du tableau affiche tous les attributs pour un comté spécifique. Ensuite, nous utilisons console.log<\/STRONG> pour comparer console.log et console.table. Cette fonction affichera une ligne avec un tableau d'objets.

<\/A>

console.log<\/P><\/DIV>

Une fois que nous développons le tableau, nous pouvons voir les objets sous forme de liste.

<\/A>

console.log développé<\/P><\/DIV>

Pour voir les attributs, nous devons développer les objets dans la liste.

<\/A>

console.log développé avec attributs<\/P><\/DIV>Alors que nous pouvons accéder aux attributs d'une seule entité lorsque nous utilisons console.log, nous pouvons voir tous les attributs pour toutes les entités à la fois en utilisant console.table<\/>! L'image ci-dessous montre les deux fonctions dans la fenêtre console.

console.table &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&.log}Partie2:&nbspPointsd'arrêt conditionnelsDansConseilsde débogage JavaScript Partie II, nous avons parlé de définir un pointd'arrêt dans l'onglet Sources, rafraîchir l'application et mettre en pause l'application à cette ligne decode.C'est une excellente façon dexaminer votre code et commentles fonctions sont appelées, et où des zones potentiellesde problème pourraient survenir.Cependant, parfois nous ne voulons pas que le pointd'arrêt soit atteint chaque fois.Parfois,nous voulons seulement que le pointd'arrêt soit atteint si certaines conditions sont remplies.Bien que nous puissions écrire du code logique sous forme deboucle pour vérifier des valeurs, il existe une façon plus facile defaire cela à lexécution.Par exemple,voyons un exemple.1.Ouvrez leEdit Features sample&nbsp’etles outilsde développement Chrome.2.Naviguez vers l’onglet Sources et cliquez gauche sur la ligne301 pour y définir un pointd'arrêt.3.Après avoir défini le pointd'arrêt,clic droit dessus et sélectionnez « Modifier le pointd'arrêt… ».}Note : Nous pouvons également y accéder en cliquant droit sur la ligne301 puis en sélectionnant « Ajouter un pointd'arrêt conditionnel… ». renvoie toujours true, donc nous devons utiliser <\/EM> "==".<\/A>

Expression de point d'arrêt<\/P><\/DIV>

5. Si nous saisissons "test" pour le "Contact :" et cliquons sur "Mettre à jour les infos de l'incident", le point d'arrêt sera atteint et l'application se met en pause.

<\/A>

Condition remplie<\/P><\/DIV>

Ces points d'arrêt conditionnels peuvent être utiles pour tester lorsque vous souhaitez vous assurer que les données sont correctement renvoyées au serveur, ou pour la gestion des erreurs lorsque vous voulez que l'application se mette en pause afin que vous puissiez inspecter l'objet ou les objets d'intérêt plutôt que de laisser votre code de gestion des erreurs prendre le relais.Partie 3 : Blackboxing<\/STRONG><\/SPAN>

Bien que définir des points d'arrêt soit un excellent moyen de se familiariser et de parcourir votre code, ce processus peut parfois vous faire sortir du fichier d'intérêt et vous emmener dans un autre fichier source ou dans une bibliothèque JavaScript tierce.

Par exemple, regardons un exemple.

1. Ouvrez l'exemple

Query SceneLayerView sample<\/A> <\/STRONG> pour suivre (c'est similaire à l'exemple trouvé sur developers.arcgis.com<\/A>).

2. Ouvrez les outils de développement Chrome, sélectionnez l'onglet Sources, et cliquez gauche sur la ligne 49 pour définir un point d'arrêt.

3. Actualisez la page pour que le débogueur s'arrête à la ligne 49. À partir de là, un message "Paused in debugger" apparaît (à côté d'un bouton "Play" et d'un bouton "Step Over"). Voir ci-dessous pour une capture d'écran.

<\/A>

En pause à la ligne 49<\/P><\/DIV>

4. Si vous cliquez environ cinq fois sur le bouton "Step Over", vous sortez du fichier principal .html et entrez dans le fichier init.js de l'ArcGIS API for JavaScript. Vous pouvez explorer le fichier init.js, mais nous voulons nous concentrer sur le code que nous avons écrit. Cliquez sur le bouton "Play" pour revenir en toute sécurité.

<\/A>

Débogueur dans le fichier init.js<\/P><\/DIV>

Entrez le blackboxing pour sauver la situation. Le blackboxing est une méthode pour exclure des fichiers et des bibliothèques du débogueur, afin que votre attention reste sur votre ou vos fichiers d'intérêt. Voyons comment nous pouvons blackboxer la bibliothèque ArcGIS API for JavaScript afin de ne parcourir que le fichier principal d'intérêt.

1. Avec les outils de développement ouverts, cliquez sur les trois points verticaux dans le panneau tout à droite de la fenêtre et sélectionnez Paramètres.

<\/A>

Paramètres des outils de développement<\/P><\/DIV>

<\/>

Débogage avec le débogueur JavaScript

(2017)Fichiers source JavaScript en BlackboxRejoignez-nous la prochaine fois alors que nous continuons à explorer toujours plus profondément les Developer Tools et à apprendre des leçons précieuses. Bon débogage !</span>Artemis F. et Noah S. - Support Esri SDK

AndresCastillo

Here is a blog I wrote that 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