Déboguer vos applications SIG web à l’aide des outils de développement de votre navigateur

Les offres de logiciels en tant que service (SaaS) et les applications SIG web gagnent en puissance tout autant qu’en complexité. Il devient donc de plus en plus important de comprendre comment, en tant que concepteurs de ces applications, nous pouvons résoudre de manière efficace et efficiente les problèmes que nos clients peuvent éprouver. En tant que développeurs de SIG web, nous disposons de nombreux outils qui nous aident à comprendre pourquoi certains problèmes surviennent et, possiblement, à les résoudre. Le présent billet de blogue traite des outils de développement de différents navigateurs qui permettent de lire les erreurs et de comprendre le trafic réseau entre le client (navigateur) et les données stockées dans notre SIG web. Commençons.

Les offres de logiciels en tant que service (SaaS) et les applications SIG web deviennent de plus en plus puissantes et complexes. À cela s’ajoute le désir de nos clients d’avoir accès à plus de renseignements. C’est pourquoi les applications que nous créons peuvent évoluer et devenir plus sophistiquées au fil du temps. Nos clients sont donc susceptibles d’éprouver des difficultés lorsqu’ils visualisent ces applications dans leur navigateur. Parfois, ils peuvent être obligés de se connecter alors que l’application devrait être publique. D’autres fois, ils peuvent obtenir un message d’erreur indiquant qu’une couche est incapable de se charger. Il arrive aussi qu’aucun message d’erreur ne s’affiche, mais que rien ne soit visible sur la carte. De nombreux types de problèmes peuvent survenir, certains difficiles à expliquer à première vue. Comment déterminer rapidement pourquoi nos clients rencontrent ces problèmes? En utilisant les outils de développement de notre navigateur.

Où puis-je trouver les outils de développement?

Tous les navigateurs modernes sont dotés de leurs propres outils de développement intégrés. Aucun module d’extension ni application tiers n’est nécessaire pour les utiliser. Les outils sont tous accessibles de plusieurs manières différentes, quel que soit le navigateur que vous utilisez.

Il est possible d’accéder aux outils de développement de Chrome à l’aide des raccourcis clavier F12 et CTRL+SHIFT+I, ou encore par l’intermédiaire du menu Options > Plus d’outils > Outils de développement, comme l’indique l’image ci-dessous :

Les outils de développement de Firefox sont accessibles par les mêmes raccourcis clavier que Chrome, soit F12 et CTRL+SHIFT+I, ou par l’intermédiaire du menu Options > Développement web > Outils de développement, comme l’indique l’image ci-dessous :

Enfin, les outils de développement de Microsoft Edge, comme les autres, sont accessibles au moyen des mêmes raccourcis clavier (F12 et CTRL+SHIFT+I), ou par l’intermédiaire du menu Options > Outils supplémentaires > Outils de développement, comme l’indique l’image ci-dessous :

La quantité de renseignements affichés dans les outils de développement peut être intimidante au début. Nous allons passer en revue l’information qui est la plus utile pour nous en tant que développeurs de SIG web. Nous pourrons ainsi nous familiariser avec les outils de développement et apprendre à les utiliser pour parvenir à déboguer rapidement nos applications.

À propos de l’onglet Console

C’est dans l’onglet Console des outils de développement que nous trouverons le plus de renseignements. En ce qui nous concerne, cet onglet ne sert qu’à une seule chose : visualiser les messages enregistrés. Il peut s’agir de messages d’erreurs, d’avertissements ou de journaux générés par l’application. La plupart du temps, si l’application ne se charge pas correctement ou présente un comportement étrange, la console en fournit la raison.

Les avertissements (en jaune) sont généralement une indication qu’un problème dans votre application peut avoir une incidence sur l’expérience de votre client et le fonctionnement de l’application. Ils ne signifient pas nécessairement que quelque chose cloche. Parfois, il est possible de les ignorer sans qu’il y ait d’incidence sur le comportement de l’application dans le navigateur. Les avertissements doivent être examinés et évalués selon le problème rencontré par votre client, particulièrement s’il n’y a pas d’autres messages plus révélateurs.

Les erreurs (en rouge), en revanche, sont presque toujours importantes et doivent être résolues. Elles expliquent souvent en détail pourquoi l’application ne fonctionne pas comme vous ou votre client l’espériez.

L’avantage de l’onglet Console est qu’il fournit des renseignements détaillés sur la raison pour laquelle l’application ne se charge pas ou ne fonctionne pas correctement. Dans la plupart des cas, il fournit plus de renseignements sur une erreur que l’application ne le fait elle-même. Il s’agit d’une précieuse ressource quand vient le temps de résoudre des problèmes liés à nos applications SIG web.

À propos de l’onglet Network (réseau)

L’onglet Network, que nous abordons dans un deuxième temps, mais qui n’en est pas moins important pour autant, contient toutes les requêtes réseau envoyées par le navigateur de votre client, par l’intermédiaire de votre application, aux serveurs qui hébergent et stockent les données affichées. La plupart du temps, il comprend également la réponse du serveur, ce qui permet de savoir que le serveur a pu répondre et de déterminer s’il a renvoyé l’information que nous attendions.

Il se peut que l’application ne présente aucune erreur ni aucun avertissement dans l’onglet Console, mais qu’elle se comporte néanmoins de façon incorrecte. Dans ces cas, nous devons examiner le trafic réseau pour en savoir plus.

L’onglet Network contient beaucoup plus de renseignements que l’onglet Console. Si l’on sait ce qu’il faut y chercher, il s’avère particulièrement utile.

Notre premier réflexe est de rechercher les codes d’état affichant les messages d’erreur, comme dans l’onglet Console. Ce n’est pas la meilleure approche. Souvent, le serveur répond à la requête du client en affichant l’état 200. Cependant, il se peut que cette réponse ne soit pas celle que nous espérions. Par exemple, si notre application interroge un service sécurisé, mais qu’elle n’inclut pas de jeton dans les paramètres de la requête, le serveur répondra avec un état de 200, mais indiquera dans la réponse qu’un jeton est nécessaire ou non valide. Nous ne devons donc pas nous fier uniquement aux codes d’état lorsque nous consultons l’onglet Network des outils de développement.

Nous devons plutôt nous concentrer sur les requêtes adressées à nos services en examinant les paramètres de la chaîne de requête et la réponse du serveur. Pour ce faire, il faut sélectionner une requête dans le trafic réseau. Il est possible de repérer une tendance dans les requêtes envoyées aux services, selon le nom de la requête, qui comprend généralement query?f=json, l’ID de la couche et son format, comme 0?f=json, ou le nom de la couche elle-même (si nous le connaissons). Pour limiter les résultats et n’afficher que les requêtes qui nous intéressent, il est préférable d’appliquer un filtre, comme ci-dessous :

Par la suite, nous pouvons sélectionner une requête et en afficher l’onglet Headers (en-têtes). C’est un onglet qui, encore une fois, contient beaucoup de renseignements importants. Pour éviter d’avoir la tête qui tourne, concentrons-nous pour l’instant sur les paramètres de la chaîne de requête (au bas de l’onglet). En nous appuyant sur ce que nous savons de l’application et de nos données, nous pouvons nous demander : ces paramètres sont-ils valides? Est-ce que c’est ce que nous attendions de notre application?

Nous pouvons ensuite poursuivre notre examen de cet élément du trafic réseau et observer la réponse du service que cette requête reçoit. Il est possible de procéder de deux façons : 1. en sélectionnant l’onglet Response (réponse) dans la requête dans les outils de développement; 2. en double-cliquant sur la requête elle-même, ce qui ouvre un nouvel onglet où est reproduite fidèlement la requête envoyée par l’application. Nous pouvons explorer la réponse en détail et en savoir plus à propos de ce que l’application reçoit de cette requête particulière. En nous appuyant sur ce que nous savons de la requête et des paramètres de sa chaîne, nous pouvons nous demander : est-ce une réponse valide? Contient-elle l’information que nous attendions?

Si vous avez répondu non à l’une de ces questions, il est probable que vous ayez découvert en tout ou en partie le problème que vos clients éprouvent. Vous serez ainsi en mesure d’approfondir vos recherches. Vous devez répéter ces étapes jusqu’à ce que vous ayez trouvé le problème dans l’une des requêtes de votre client ou que vous ayez déterminé que toutes les requêtes fonctionnent et sont valides. Dans ce cas, si le problème persiste, vous pouvez communiquer avec l’équipe d’assistance technique ou trouver de l’aide auprès de la communauté Esri.

Conclusion

Il s’agit d’une brève introduction aux outils de développement de votre navigateur. Nous avons seulement effleuré la surface de ce qu’il est possible de faire avec ces outils. En comprendre les capacités et connaître la meilleure façon de passer au crible la vaste quantité de renseignements qu’ils contiennent vous permettront d’affiner vos techniques de débogage. Il peut être fastidieux de parcourir les informations que contient l’onglet Console et d’examiner attentivement le trafic réseau pour repérer la cause d’un problème, mais une fois que vous aurez mis le doigt dessus, vous en ressentirez une grande fierté. Nous espérons que le présent billet de blogue vous a permis de prendre conscience de la puissance des outils de développement et que vous êtes maintenant plus confiant dans vos capacités à créer des applications complexes dans votre SIG web.

Ce billet a été écrit en anglais par Tom Thompson et peut être consulté ici.