Cédric Bonnot

Après un aperçu de Fiddler, voici une présentation de l’outil IE Developer Toolbar.

Nous avons tous été confronté lors du développement d’un site web à une page dont la présentation nous pose problème.

Parfois le problème vient d’une hiérarchie d’éléments CSS altérant la page de manière inexacte, dans d’autres cas il s’agit d'une erreur dans les balises (X)HTML et malgré tous nos efforts ,le navigateur n’est pas capable d’effectuer le rendu de manière correcte.

Pour nous aider (et ce n’est rien de le dire), Microsoft met à notre disposition, et ce gratuitement, un outil nommé « Internet Explorer Developer Toolbar ». Cet outil permet de visionner non seulement de manière unitaire chaque élément d’une page Web mais aussi chaque aspect de celle-ci.

L’installation est aussi simple que celle de Fiddler ;-) Une fois installé, l'outils peut être activé via le menu « View – Explorer Bar – IE Developer Toolbar » ou plus directement par le bouton automatiquement ajouté à IE.

Présentation générale

Lors de l’execution, trois panels sont ouvertes. Celle-ci sont, par défaut, positionnées en bas de l’écran.

Pour l’ouvrir sous forme d’application indépendante, il suffit de cliquer sur le bouton « Unpin » situé à droite de la barre d’outils de IE Toolbar.

Le panel situé à gauche est composé d’un treeview listant chaque élément de la page. Cet écran nous permet ainsi de mieux comprendre la structure de la page en cours. La sélection d’un élément rempli automatiquement les deux autres panels. Ceux-ci contiennent alors l’ensemble des détails de l’élément tels que les attributs ou les styles.

Présentation des menus

Menu Find

Parce qu’une page peut être très complexe, deux méthodes sont possible pour sélectionner un élément particulier :
- En cliquant directement dessus après avoir choisi l’option « Select élément by click » depuis la barre d’outil ou le menu « Find - Select Elément By Click »
- En recherchant l’élément par son Id, Class ou Name en passant par le menu « Find – Search Elément »
Une fois l’élément sélectionné, il est possible de modifier un des attributs en double cliquant sur l’attribut choisi et ainsi en voir immédiatement le résultat. Vous pouvez même créer un attribut de toute pièce.

Menu Disable

Lorsqu’un problème surgit sur une page, la manière la plus simple de le trouver est parfois de simplifier la page.
Le menu Disable permet de désactiver certaines fonctionnalités du navigateur. Ces fonctionnalités sont :
- Les scripts clients (VB ou JS)
- Le popup blocker d’IE
- L’ensemble des styles CSS

Menu View

Ce menu permet d’afficher des détails concernant la page qui ne sont normalement pas disponibles. Ces options de menu sont :
- Class and ID information : affiche les ID et les classes CSS associés
- Link paths : indique l’URL des liens
- Links reports : ouvre une nouvelle page contenant l’ensemble des liens de la page
- Tab Indexes
- Access Keys
- Source : permet d’afficher le code source de la page
Revenons sur ce dernier menu. Le menu « View –Source » permet d’afficher le code source de la page entière ou bien d’une partie de la page (jusqu’au niveau élément ). Le code source est affiché dans un éditeur propriétaire. Celui-ci propose la coloration syntaxique, la numérotation des lignes, la notion de région dans le code (à l’instar de VS.NET) et le « word wrapping ».

Menu Outline

Comme les divers éléments d’une page peuvent être imbriqués de manière complexe. Il est donc nécessaire de pouvoir les identifier. Pour cela IE Dev Toolbar nous fournit de nombreuses options pour « souligner » différentes catégories d’éléments :
- Table Cells
- Table
- Div Elements
- Images
- Positioned Objects : sélectionne les éléments selon le mode de positionnement (relative, absolu, fixe, flottant)
- Any Elément : permet de définir sa propre liste d’éléments à surligner.

Menu Picture

Ce menu contient plusieurs options permettant de travailler avec les images incluses dans la page.
- Disable Images
- Show Image Dimensions
- Show Image File Size
- Show Image Paths
- View Alt Text
- View Image Report : ouvre une nouvelle fenêtre affichant l’ensemble des images de la page contenant les informations des autres menus.

Menu Cache

Ce menu propose les options suivantes :
- Clear Browser Cache
- Clear Browser Cache for this domain
- Disable Session Cookies
- Clear Session Cookies
- Clear Cookies for this domain
- View Cookie Information : ouvre un fenêtre listant l’ensemble des cookies du domaine

Menu Tools

Ce menu propose une série d’outils très utile au quotidien :
- Resize : permet d’ajuster le navigateur à des tailles standards mais aussi personnalisées
- Show ruler : permet de mesurer la taille d’un élément
- Show Color Picker : permet d’obtenir la valeur hexadécimale et décimale d’une couleur.

Menu Validate

Permet de vérifier que la page respecte les normes W3C (rare sont les pages les respectant). On peut valider :

- HTML
- CSS
- Feed
- Local HTML
- Local CSS

Conclusion

Même si ce projet n’est pas une nouveauté en soi, c’est la première application qui inclus l’ensemble des fonctionnalités généralement dispersées dans plusieurs applications.

Pour le télécharger :

Internet Explorer Developer Toolbar