DOM Inspector

Petit guide d'initiation

Introduction

N'avez-vous jamais créé une page Web pour vous rendre compte, au premier test, qu'elle ne s'affichait pas correctement? Si ça ne vous est jamais arrivé, je vous envie et j'aimerais bien savoir comment vous faites. Pour la plupart d'entre nous toutefois, le débogage est une réalité quotidienne. Avec le DOM Inspector, vous pouvez voir une page Web exactement comme Mozilla la voit, vous permettant ainsi d'isoler et de réparer rapidement les problèmes. En plus de ce dépannage rapide, le DOM Inspector offre plusieurs outils pour vous aider à trouver et réparer les erreurs dans le HTML et le XML. Enfin, le DOM Inspector peut aussi servir d'environnement d'expérimentation temporaire pour tester des styles CSS et éditer l'arbre du DOM.

Démarrage

Allons-y immédiatement en tapant ctrl+shift+i (cmd+shift+i sur Mac). Si rien ne se passe, vous allez devoir installer le DOM Inspector (vous pouvez trouver la version appropriée dans les répertoires FTP correspondant à votre version de Mozilla, sous Windows-xpi, Linux-xpi ou Mac-xpi). Si vous obtenez une fenêtre "Information sur la page", c'est que vous avez raté le shift de la combinaison de touches. La combinaison ctrl+shift+i est le moyen le plus simple de démarrer le DOM Inspector, sinon il faut passer par les menus Outils->Développement Web->DOM Inspecteur puis taper l'URI de la page à inspecter.

Le DOM Inspector maintenant ouvert, vous pouvez voir à gauche un menu en arborescence semblable à Windows Explorer. Chaque ligne représente un noeud (node) du DOM, ces noeuds étant eux-mêmes des balises HTML/XML. Vous pouvez naviguer dans l'arbre du DOM en cliquant les petites flèches à gauche de chaque noeud afin de dérouler l'arborescence. En cliquant directement sur un noeud et en le sélectionnant, le DOM Inspector va focaliser cet élément sur lequel vous voulez travailler. Essayez par exemple de trouver la première ancre (balise A) de cet article. Vous remarquerez que chaque fois que vous cliquez sur un noeud, l'élément correspondant de la fenêtre du navigateur va clignoter en rouge à quelques reprises, ce qui peut être utile pour inspecter des pages Web complexes.

Éditer des éléments du DOM

Maintenant que nous avons sélectionné notre balise A, nous allons utiliser le DOM Inspector pour faire une édition à la volée. Dans la partie droite du DOM Inspector, vous pouvez voir un panneau nommé "DOM Node". Ce panneau est utile pour faire des éditions temporaires du HTML /XML sur lequel vous travaillez. Faites un clic-droit sur l'attribut href dans la liste des attributs du noeud et sélectionnez Edit dans le menu contextuel. Une boîte de dialogue va apparaître et vous demander par quelle valeur vous désirez remplacer la valeur actuelle. Entrez n'importe quelle URI et cliquez OK. Le DOM Inspector devrait maintenant afficher cette nouvelle valeur à côté de l'attribut href. Si vous retournez dans la fenêtre du navigateur et ouvrez ce lien dans une nouvelle fenêtre ou un nouvel onglet, vous devriez aboutir à l'adresse que vous avez entrée. Vous pouvez éditer ou modifier ainsi n'importe quel élément présent dans une page que Mozilla affiche, ce qui est un moyen rapide de faire des éditions temporaires de pages que vous ne contrôlez pas.

Si vous avez cliqué directement le lien au lieu de l'ouvrir dans un nouvel onglet ou une nouvelle fenêtre, vous aurez perdu les changements effectués sur la page. Refaites simplement Ctrl+Shift+i pour ré-inspecter la page. Les changements effectués par le DOM Inspector ne s'appliquent qu'à la page courante chargée dans le navigateur et sont perdus quand elle est remplacée.

"Bonsai"

Supposons que, pour une raison obscure, vous n'aimez pas le titre de cet article. Vous pouvez le retrancher de l'arbre du DOM (et donc du navigateur) simplement en faisant un clic-droit sur le noeud correspondant (dans le panneau de gauche) et en choisissant "Supprimer" dans le menu contextuel. Pouf! Il va disparaître à la fois du DOM Inspector et de la fenêtre du navigateur. Vous pouvez supprimer des noeuds comme bon vous semble, en autant que vous ne supprimiez pas le noeud racine de la page (HTML dans ce cas-ci), sous peine de voir Mozilla planter. Une fois vos coupures terminées, rechargez simplement la page pour revenir à son état initial. Cette méthode peut être très utile pour isoler un problème dans une page. Vous pouvez même envoyer la partie du code qui fait problème à la personne responsable du site en faisant un clic-droit sur le noeud problématique et en choisissant "Copy XML" dans le menu contextuel.

Tester des règles de style

Nous allons maintenant faire des essais de styles générés dynamiquement. J'ai le feeling que la couleur pourpre (purple) serait plutôt jolie comme couleur de liens dans cet article, mais je n'ai pas envie de prendre le temps d'éditer ma feuille de styles et de la recharger pour vérifier. Pas de problème, on peut utiliser le DOM Inspector pour faire un test rapide. Nous allons nous servir de la capacité du DOM Inspector à modifier dynamiquement les feuilles de styles pour changer la couleur de nos liens.

Cette page est reliée à quelques feuilles de styles, pas toutes actives dans le navigateur. Vous pouvez voir la liste des feuilles de styles reliées en choisissant le mode d'affichage "Stylesheets" dans le panneau de gauche. Pour notre test de couleur, nous n'avons besoin que des feuilles de styles actives et affectant l'élément A. Pour trouver le premier lien de cette page sans dérouler tout l'arbre du DOM, nous allons utiliser une fonction de recherche très pratique. Cliquez Search->Find (ou tapez Ctrl + f) et tapez A dans le champ de saisie. Cochez ensuite "Tag" dans la boîte "Search by..." et appuyez sur le bouton Find. Le DOM Inspector va examiner l'arbre du DOM et trouver la première occurence de l'élément ancre en la mettant en surbrillance. Comme nous sommes intéressé par les styles et non par les noeuds du DOM, nous allons changer le mode d'affichage de notre panneau de droite en cliquant la petite icône en haut du panneau et en choisissant l'option "CSS Style Rules" dans le menu.

La partie supérieure du panneau contient la liste des règles de styles appliquées à l'élément focalisé. En sélectionnant une des règles de cette liste, vous pouvez voir les propriétés actuellement appliquées à la page et les éditer comme nous l'avons fait précédemment avec les attributs d'un élément du DOM. Sélectionnez la dernière règle dans le panneau supérieur puis faites un clic-droit dans le panneau inférieur. Choisissez "New Property" dans le menu. Tapez color dans la première boîte de dialogue qui demande le nom de la propriété et #FOF (le code de la couleur pourpre) dans la seconde boîte qui demande la valeur de la propriété. Faites un clic-droit sur cette nouvelle règle de style et cochez "Toggle Important". Ceci est l'équivalent d'inclure !important dans la feuille de style et permet à la propriété d'avoir priorité sur toutes les autres propriétés qui n'ont pas !important inclus dans leur valeur. Vous pouvez continuer d'ajouter ou enlever des propriétés à l'aide de cette simple procédure. Le panneau CSS est aussi très utile pour déboguer les feuilles de styles parce qu'il vous permet d'identifier quelles règles sont appliquées à un élément problématique de même qu'il vous permet de supprimer rapidement une règle pour voir si le problème se corrige.

Capturer une zone

Le dernier outil que nous allons voir dans ce petit tour du Dom Inspector est le panneau Box Model. Malheureusement, il semble que cet outil ne soit pas disponible pour les utilisateurs de Linux (bug 109483). Pour afficher ce panneau, cliquez sur l'item Box Model dans le menu d'affichage des panneaux de droite. Les informations présentes sur ce panneau peuvent être utiles pour vérifier par exemple si vos blocs <DIV> sont mal positionnés à cause de leurs margin ou padding. Mais la fonction qui nous intéresse plus particulièrement ici est la possibilité de faire une capture d'écran de n'importe quelle partie de la page et de l'enregistrer au format PNG. Sélectionnez l'élément qui vous intéresse dans l'arbre des noeuds et appuyez sur sur le bouton "Capture" dans le panneau de droite. Le bouton "Save as..." devrait être activé tandis que Mozilla capture la zone. Cliquez "Save as..." et enregistrez la capture sous test.png, sur votre bureau ou ailleurs. Vous n'êtes pas obligé de capturer la page entière, vous pouvez limiter la capture à n'importe quel élément de la page. Cette fonction permet d'envoyer rapidement à l'auteur d'une page Web problématique une "photo" du problème, sans avoir à ouvrir un logiciel d'édition d'image. La seule restriction de cette fonction est qu'elle ne capture que les éléments inclus dans votre écran. Selon le point de vue, on peut considérer cette restriction comme un bogue ou une fonction utile.

Autres ressources

J'espère que ce rapide tour d'horizon vous aura permis de découvrir combien cet outil peut être utile pour faire des sites Web. Il y a plusieurs autres fonctions qui n'ont pas été abordées ici, mais comme le dit la documentation officielle du DOM Inspector: "Start playing with it and you'll get the hang of it" (Commencez à jouer un peu avec, et vous allez vite devenir accro). Une ébauche de documentation officielle et une FAQ (minimaliste) sont disponibles sur le site mozilla.org.

Article original en anglais sur Grayrest
Adaptation en français par F.Constantineau