Share
Je déteste le débogage et je n'ai jamais rencontré de développeur qui ait soutenu le contraire. Il est difficile de parcourir votre code et de comprendre pourquoi il est cassé. Et plus important encore, c'est un aveu que mon code est cassé et que je ne suis pas infaillible! Hérésie, je dis!
Sérieusement, les bogues font simplement partie du processus de développement Web et, même si nous les haïssons, nous devons certainement nous en occuper. Les développeurs front-end n'ont pas toujours eu de riches outils de débogage comme d'autres plates-formes et langages. Dans les bons jours, alerte() était votre ami et une méthode importante (excusez le jeu de mots) pour résoudre le code. Et le débogage du code côté client présente son propre ensemble de défis en raison de la variété des technologies en jeu. Si vous y réfléchissez, le débogage des pages, en particulier des pages dynamiques, implique de nombreux éléments mobiles susceptibles d’affecter le rendu. Vous disposez du modèle DOM (Document Object Model), JavaScript, CSS, du trafic réseau, des en-têtes HTTP et de nombreuses autres technologies qui fonctionnent toutes pour produire une page et dans de nombreux cas, interagissent et s'affectent.
Heureusement, les temps ont changé et tous les principaux navigateurs ont des outils intégrés qui augmentent considérablement les fonctionnalités de dépannage pour les développeurs. Je remercie Joe Hewitt d’avoir fait progresser le paysage des outils. Il a créé Firebug en 2006. À mon avis, cela a ouvert la voie sur ce que les vrais outils de navigateur devraient être.
Depuis lors, nous avons vu Firebug évoluer énormément et servir de base de travail à d'autres. Nous disposons désormais d'outils puissants comme Chrome, Internet Explorer, Safari et Opera..
Pour cet article, je vais me concentrer sur les outils de développement d'Internet Explorer et sur les fonctionnalités qu'il fournit. La fonctionnalité dont je vais parler sera très familière à quiconque a utilisé un débogueur basé sur un navigateur, mais je souhaite mettre l'accent sur les outils d'Internet Explorer afin de bien comprendre ce qui est réellement disponible..
Permettez-moi de commencer par admettre que je sais qu'IE est le navigateur que vous aimez détester. J'ai compris. Le fait est qu'il s'agit d'un navigateur majeur, important pour de nombreux visiteurs du site. Cela signifie que vous allez le cibler et que vous aurez besoin de déboguer le code tôt ou tard. Ce qui est plutôt surprenant, c'est que beaucoup de développeurs ne savent pas qu'IE est livré avec des outils de développement ou pire qu'ils pensent avoir encore besoin de télécharger la barre d'outils de développement d'Internet Explorer..
Les outils de développement sont communément appelés «outils de développement F12» car appuyer sur la touche «F12» de votre clavier les ouvrira lorsque vous serez dans Internet Explorer (il est intéressant de noter que l’appui de F12 lance également Firebug et les outils de développement Chrome)..
Les outils de développement sont également accessibles via le menu "Outils" sous le libellé "Outils de développement F12"..
Le point clé sur lequel j’ai insisté est qu’ils sont inclus dans Internet Explorer (et ce, depuis IE8). Il n’est donc pas nécessaire d’installer un plugin pour obtenir des outils de développement. De plus, bien qu'ils s'appellent les "Outils de développement F12", aux fins de cet article, je vais laisser tomber le "F12" et m'enregistrer quelques frappes au clavier.
Les outils de développement fournissent aux développeurs et aux concepteurs un ensemble complet d’outils qui peuvent traiter de nombreux cas d’utilisation courants de débogage et d’inspection auxquels ils seront confrontés au cours de leur travail. Des capacités comme:
Ce sont des fonctionnalités qui sont normales pour le cours de nos jours et essentielles pour déterminer les maux de vos pages. De plus, les outils de développement permettent de tester votre site dans différentes versions d'Internet Explorer en modifiant le mode du navigateur:
Le test de plusieurs versions d'IE a traditionnellement été une douleur royale dans le tuckus; cette fonctionnalité vise à réduire le frottement en veillant à ce que vos sites fonctionnent dans les différentes versions d'IE.
Les capacités supplémentaires incluent des éléments tels que:
Je m’attache beaucoup à aider les développeurs à utiliser des techniques de développement basées sur des normes pour s’assurer que leurs sites fonctionnent parfaitement avec IE. Comme vous pouvez l’imaginer, je passe beaucoup de temps à analyser le code, en particulier JavaScript. Donc, afin de retracer un bogue étrange, j'ai besoin d'un débogueur JS qui me permet d'analyser le code de différentes façons..
Une des fonctionnalités les plus importantes pour moi est la capacité de rendre joliment JavaScript. Je ne connais aucun développeur qui ne minimise pas son code de production de nos jours. Et c'est absolument la bonne chose à faire, mais, lorsque je dois déboguer quelque chose sur un site de production - en particulier lorsque je n'ai pas accès au code source - il est inestimable de pouvoir embellir le code. Oui, il existe des outils en ligne tels que JS Beautify qui peuvent le faire, mais cela me forcerait à copier et coller du code afin de le désobfumer. Avoir cette capacité intégrée me permet de gagner beaucoup de temps. Par exemple, supposons que je regarde une version simplifiée de jQuery:
Via l'icône de l'outil, je peux accéder à l'option "Formater JavaScript" qui va désobfumer le code source jQuery réduit et me fournir un code nettement plus lisible:
Comme vous pouvez le voir dans l'image ci-dessus, le code est certainement plus facile à utiliser. L’autre atout de cette fonctionnalité est qu’une fois que vous l’avez activée, elle continue de désobfumer vos fichiers JS pendant votre session..
Un inconvénient est que le processus de désobfuscation ne rétablira pas jQuery à sa source d'origine. À ma connaissance, aucun service ne peut le faire, mais les cartes sources vont résoudre ce problème à l'avenir. Assurez-vous de lire l'article sur les cartes source de Sayanee Basu auquel je viens de vous renvoyer pour une excellente introduction sur le sujet..
Une fois que le code est lisible, il est plus facile de déterminer le flux de la source. À ce stade, je peux définir des points d'arrêt à des points logiques dans le code pour isoler les problèmes à mesure que vous les parcourez. Et bien sûr, vous pouvez définir plusieurs points d'arrêt sur plusieurs fichiers source..
Vous pouvez également spécifier des points d'arrêt conditionnels vous permettant d'interrompre le flux de code en fonction d'une valeur spécifique..
Comme prévu, vous pouvez utiliser n'importe quelle méthode pour fournir le contrôle granulaire dont vous avez besoin pour extraire le code sans perdre de temps. Il est important de noter que lorsque vous parcourez votre code, une pile d'appels est accessible. Elle vous permet de voir comment vous en êtes parvenue à une méthode spécifique ou à un fichier JavaScript et de revenir à cette méthode ou ce fichier pour inspecter le code:
En outre, il est utile d’isoler les chemins de code inattendus susceptibles de poser problème..
Les informations sont essentielles pour comprendre ce qui se passe et les outils de développement fonctionnent pour vous donner les options permettant de définir ce que vous voulez voir. Ainsi, avec la pile d'appels, vous obtenez des informations sur les variables de l'étendue actuelle via l'onglet "Locals":
Vous pouvez également définir votre propre liste de surveillance (via l'onglet Surveillance) afin de suivre l'évolution des valeurs de variable de manière dynamique en fonction de l'exécution du code. L'avantage, c'est que les outils vous offrent la possibilité de modifier les valeurs dans l'une ou l'autre liste pour que vous puissiez voir comment cela affecte votre application..
Et n'oublions pas la console. Aucun débogueur ne serait utile sans une console pour générer des erreurs et vous permettre de déboguer de manière interactive:
La console affichera les erreurs courantes associées à votre page, notamment les problèmes liés à JavaScript et aux balises. Vous pouvez également entrer des commandes pour interagir avec la page et utiliser l'objet console dans votre code JavaScript pour afficher des messages sur la console..
Tout ce qui précède est excellent et certainement précieux. Un aspect souvent négligé du débogage est la performance du code. Il est rare que je parle aux développeurs qui mentionnent comment ils ont évalué leur code pour déterminer les goulots d'étranglement dans les méthodes à exécution lente, notamment à partir de frameworks tiers.
Les outils de développement fournissent un profileur JavaScript qui analysera votre code au fur et à mesure de son exécution, fournissant ainsi une mine d'informations à utiliser pour optimiser votre code..
Les éléments clés comprennent:
Armés de ces informations, vous pouvez déterminer si votre méthode doit être refactorisée, si une bibliothèque tierce pose des problèmes ou si une méthode spécifique du navigateur est un goulot d'étranglement. Pour moi, la combinaison de temps inclusif et exclusif serait un paramètre important à évaluer car elle indiquerait le temps nécessaire à l'exécution d'une méthode spécifique, y compris le temps qu'il a fallu à un enfant ou à des méthodes externes. À partir de là, je peux commencer à analyser plus en profondeur le code du problème..
Je n'oublierai jamais lorsque j'ai codé ma première demande Ajax. C’était un peu de code, mais c’était vraiment magique (oui, je suis bizarre comme ça). Faire des mises à jour dynamiques du DOM basées sur l'extraction des données d'une requête HTTP en arrière-plan était incroyablement cool et puissant. Je n'oublierai jamais non plus la première fois que j'ai essayé d'envoyer un résultat, ce qui a généré une erreur et m'a laissé abasourdi. Heureusement, Firebug avait un inspecteur de requête réseau qui me permettait de vérifier le code renvoyé par mon serveur et de le résoudre..
L'onglet "Réseau" des outils de développement fournit cette fonctionnalité. Il indique le trafic lié à la page en cours de chargement et expose les détails que vous pouvez utiliser pour résoudre les problèmes liés au réseau..
En examinant le trafic capturé, vous pouvez voir le type de demande émise (par exemple, un GET ou un POST), s’il a abouti et combien de temps il a fallu pour le terminer. L'inspecteur de réseau fournit également des informations importantes sur le type d'actif que vous avez demandé (par exemple: CSS ou une image) et sur le type de code à l'origine de la demande. Tout cela est fourni dans une vue récapitulative qui offre des détails rapides sur les demandes..
En choisissant une vue détaillée, vous pouvez obtenir des informations détaillées sur une demande spécifique. Pouvoir consulter le corps de la réponse m'a permis de résoudre le problème que j'ai déjà mentionné avec mon appel XHR. Mais il ne s'agit que d'une petite partie des données globales que vous obtenez en passant dans la vue détaillée. En dehors de cela, vous obtenez les en-têtes de la demande (demande et réponse), les cookies qui ont été envoyés et même des informations de minutage qui vous indiquent la durée de la demande..
L’affichage du minutage dans la vue récapitulative est très important car il indique clairement les demandes qui durent longtemps et qui pourraient poser problème..
Je serai le premier à dire que je déteste tester plusieurs versions d'Internet Explorer. Je suis surtout ennuyé par les anciennes versions et je serais heureux si les développeurs pouvaient simplement se soucier de IE9 et IE10. Mais c’est ce qu’il est et il existe deux manières de résoudre ce problème. Vous pouvez utiliser plusieurs machines virtuelles pour chaque version d'IE que vous ciblez. Vous pouvez utiliser Browserstack.com pour virtualiser les versions d’IE dans le navigateur. Vous pouvez également utiliser la fonctionnalité de commutation de mode de navigateur des outils de développement pour que IE10 émule IE7 à IE10..
Cet outil vous permet de modifier la manière dont IE rend une page afin qu'elle émule les fonctionnalités d'une version spécifique, garantissant ainsi que votre site fonctionne pour cette version. Cela vous permet non seulement de spécifier le mode du navigateur (qui détermine la prise en charge des fonctionnalités) mais également le mode du document (qui spécifie comment une page sera interprétée). Cela vous donne beaucoup de flexibilité pour tester différentes versions d'IE à partir d'un seul navigateur. Il suffit de noter que l'équipe IE fait de son mieux pour émuler les versions. Si vous souhaitez effectuer des tests complets, les machines virtuelles sont la solution. Je commence généralement par la dernière option, car elle est de loin la plus simple et le rendu est très proche de l'utilisation d'une version native spécifique d'IE.
L’inspection du balisage est l’une des tâches les plus courantes de tout professionnel du Web. C'est bien de pouvoir regarder sous le capot comment quelque chose est construit sans avoir à faire un "View-> Source". L'onglet "HTML" des outils de développement affiche tous les éléments d'une page spécifique ainsi que leurs styles associés. et attributs. Cela vous permet d'inspecter et de mettre à jour les valeurs en temps réel et d'obtenir un retour immédiat. Vous pouvez cliquer sur, par exemple, un élément de paragraphe et celui-ci devient éditable afin que vous puissiez modifier le texte et voir les résultats immédiatement. La même chose s'applique aux styles et attributs de cet élément.
Les attributs peuvent également être ajoutés en ligne en cliquant avec le bouton droit de la souris sur un élément et en choisissant "Ajouter un attribut" dans le menu contextuel ou en sélectionnant l'onglet "Attributs" et en l'ajoutant à la liste. L'image suivante montre comment j'ai ajouté un attribut de couleur et de police à l'élément d'accentuation, en les affichant sous forme de styles en ligne dans le balisage et de lignes d'attributs individuelles dans l'onglet Attributs:
Le balisage de la page est représenté sous forme d'arborescence afin que vous puissiez voir une vue de haut en bas de l'arborescence DOM et que vous puissiez développer des éléments pour voir leurs enfants..
CSS possède également son propre onglet, mais il est conçu pour gérer les styles globaux généralement stockés dans des feuilles de style. La sélection d'une feuille de style affiche tous les sélecteurs, règles et propriétés définis et vous permet de les ajuster comme vous le souhaitez. Dans ce cas, il suffit de décocher la propriété text-align pour déplacer le texte de manière dynamique vers la gauche:
Il ne s'agit pas uniquement de modifier les règles existantes. Vous pouvez également ajouter de nouveaux sélecteurs, règles ou propriétés:
La principale raison pour laquelle j'ai voulu écrire cet article est parce que j'ai été véritablement surpris par le nombre de développeurs que j'ai rencontrés, qui avaient une idée fausse sur les outils de développement F12 - ou ne savaient pas qu'ils existaient! J'espère que cela aidera les développeurs à avoir une idée de ce qui est disponible et rend leur dépannage un peu plus facile.
J'espère également qu'il générera des commentaires sur les fonctionnalités futures dont les développeurs ont besoin. Bien que les fonctionnalités existantes soient satisfaisantes, je suis certain que vous, lecteurs, trouverez plusieurs nouveautés essentielles à votre expérience de débogage. Dites-moi ce que c'est!
Accentsconagua