Conseils de débogage JavaScript Partie II 0303030303030303 Google Chrome et l'onglet Console

Noah Sager

<\/HEAD>Ce billet de blog est le 2e 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 1 Google Chrome et l'onglet Réseau<\/A><\/STRONG><\/EM> pour notre premier segment.<\/EM>

La partie la plus agréable de toute mission de programmation est tout près du début, lorsque vous vous asseyez avec un tas d'outils et de ressources et commencez à marteler des amas bruts de code. La partie la plus difficile vient lorsque vous tentez de lancer l'application, pour voir ce code soigneusement écrit se défaire en plusieurs nuits tardives à fixer un écran d'ordinateur. Cependant, tout n'est pas perdu, car nous avons une excellente recommandation pour vous, qui est le sujet de ce blog : l'onglet Console dans les Outils de développement de votre navigateur préféré.

Si vous vous sentez contrarié ou émotif, l'onglet Console est le choix parfait pour vous. Peut-être que quelqu'un dans votre famille traverse une période difficile et pourrait avoir besoin d'un peu de réconfort. Considérez l'onglet Console de Google Chrome (des options sans gluten sont disponibles). Les utilisateurs qui aiment l'onglet Console pourraient aussi apprécier l'ArcGIS API for JavaScript.<\/A>

Je ne comprends évidemment pas les homographes<\/P><\/DIV>

Comme nous l'avons écrit dans la Partie I, accéder aux Outils de développement Chrome se fait facilement avec les touches raccourcis (Control + Shift + I) ou en naviguant en haut à droite du navigateur, cliquant sur le hamburger et choisissant 2 Plus d'outils3, puis 2 Outils de développement3.

Une fois les Outils de développement ouverts (d'autres outils sont disponibles dans d'autres navigateurs), plusieurs onglets deviennent accessibles. Ici, nous allons nous concentrer sur la Console. Si vous voulez ouvrir directement l'onglet Console dans les Outils de développement Chrome, utilisez ce raccourci clavier : Control + Shift + J (le "J" signifie jovial). Pour plus d'astuces sympas, veuillez consulter la documentation officielle Google sur

Chrome DevTools : Utiliser la console<\/A><\/STRONG>.

La Console est utilisée pour deux objectifs : 1) afficher les informations enregistrées depuis le JavaScript d'une application (généralement pendant le développement), et 2) interroger des objets et exécuter du JavaScript de manière interactive. Dans ce blog, nous examinerons les deux types d'exemples, et développerons quelques astuces supplémentaires que nous utilisons en Support Technique.

La première chose que nous pouvons faire est d'ajouter quelques instructions "console.log" dans notre application. Nous prendrons un exemple modifié, hébergé sur GitHub, que vous pouvez trouver ici : Exemple d'application Console<\/A><\/STRONG>. N'hésitez pas à suivre chez vous.

Aux lignes 60-62, puis à la ligne 66, nous avons ajouté quelques-unes de ces instructions "console.log" pour afficher des informations sur notre Feature Layer. Notre cas d'utilisation est que nous créons une application web cartographique, et pendant nos tests, nous voulons nous assurer que les données que nous consommons depuis ArcGIS Online sont bien celles à afficher sur la carte. À cette fin, nous imprimons quelques informations choisies sur le Feature Layer : le titre de la couche et l'URL de la couche. Comme je ne connais pas la syntaxe pour la propriété URL, j'utilise "URL" et "url" comme vu ci-dessous.

<\/A>

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

Voici une capture d'écran du résultat des instructions "console.log". Nous voyons les informations pertinentes que nous attendions. Notez aussi que la sortie pour "featureLayer.URL" est "undefined". C'est parce que les éléments dans la console sont sensibles à la casse. La propriété valide est "featureLater.url", et les propriétés invalides ne génèrent pas d'erreur mais retournent plutôt un résultat undefined. Cela peut être difficile à détecter, mais plus loin dans ce blog nous verrons quelques astuces pour gérer ce genre de problème.

<\/A>

Sortie Console JavaScript depuis console.log<\/P><\/DIV>

Avec la Console toujours ouverte, essayons maintenant d'entrer les mêmes valeurs de propriété depuis le code :

featureLayer.title<\/STRONG>featureLayer.URL<\/STRONG>featureLayer.url<\/STRONG><\/P>
Remarquez que toutes<\EM> ces propriétés renvoient maintenant une erreur, au lieu d'une valeur réelle (ou même "undefined"). C'est parce que les variables locales ne sont plus en portée après l'initialisation de l'application, donc même l'objet "featureLayer" ne peut être reconnu.  Voici une capture d'écran du résultat des nouvelles instructions console.

<\/A>

Sortie Console JavaScript après chargement de l'application<\/P><\/DIV>

Si nous avions fait de "featureLayer" une variable globale, alors nous verrions "undefined" retourné pour l'objet dans la Console (la variable est connue mais les détails ne sont toujours pas accessibles). Le point important est : seules les variables en portée<\EM> peuvent être interrogées dans la Console. Alors pouvons-nous utiliser la Console interactivement et taper des valeurs de propriété ? Voyons cela.

La prochaine chose que nous pouvons faire dans notre application exemple est d'ajouter une instruction "debugger ;" dans le code. Nous prendrons un autre exemple modifié, hébergé sur GitHub, que vous pouvez trouver ici :

Exemple d'application Console 2<\STRONG>. N'hésitez pas à suivre chez vous.

À la ligne 60, nous avons ajouté une instruction "debugger ;" pour aider à afficher des informations sur notre Feature Layer dans la Console. En pause dans le débogueur 2

Cool, non ?

Regardons une autre option, similaire à « debugger ». Retour à l'onglet Sources, remarquez les numéros de ligne à gauche du code. Si nous cliquons gauche sur un numéro de ligne, nous pouvons définir un point d'arrêt, ce qui aura exactement le même effet que d'écrire « debugger » dans le code. Cliquez gauche sur les lignes 56, 62 et 66 dans la même application, puis actualisez l'application. Point d'arrêt 1

L'application s'arrête immédiatement au premier point d'arrêt. Maintenant, nous pourrions revenir à l'onglet Console et inspecter à nouveau les variables et propriétés autant que nous le souhaitons. Non seulement cela, en cliquant sur la flèche courbée à droite du bouton Play en haut de l'écran, nous pouvons avancer pas à pas dans notre application et regarder avec excitation comment le code s'exécute étape par étape. Ou bien, nous pouvons cliquer sur le bouton Play en haut de l'écran et laisser l'application s'exécuter jusqu'à la fin ou jusqu'au prochain point d'arrêt. Point d'arrêt 2

Et un autre clic sur le bouton Play nous amène au point d'arrêt suivant. Point d'arrêt 3

Le but de ce blog est de souligner l'utilité et la fonctionnalité de la Console, mais nous voulons aussi souligner une autre utilisation des points d'arrêt ici. Les points d'arrêt permettent au développeur de voir l'ordre dans lequel le code asynchrone s'exécute, comment les fonctions sont lancées et quelles parties sont sautées ou échouent. Pour plus d'informations sur les astuces de débogage avec les applications JavaScript, voici quelques ressources supplémentaires des dernières années :Débogage avancé avec JavaScript (2009)Déboguer JavaScript avec les points d'arrêt Chrome DevTools (2016)Conseils de débogage JavaScript Partie I (2014)
Dans cet épisode, nous avons appris comment accéder et utiliser l'onglet Console dans Chrome Developer tools pour révéler les propriétés et valeurs des variables et objets dans notre code JavaScript. Ces informations peuvent grandement faciliter le débogage et le codage d'une application web. Ceci conclut la deuxième 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 certains outils Developer Tools, et que nous aurons tous des augmentations. Bon débogage !Noah S. et John G. - Services de support 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