Depuis que le navigateur Firefox inclut un outil "DOM Inspector" (permettant d'inspecter l'arbre DOM d'une page HTML), très utile pour le développement web, la question se pose :
Qu'en est-il pour Internet Explorer ? Existe t-il un outil équivalent ?

Et bien oui ! Si des produits payants existent comme DebugBar (payant pour un usage professionnel) ou encore IEWatch, la solution gratuite vient de Microsoft même : Internet Explorer Developer Toolbar

Cet outil est un plugin Internet Explorer, facile à installer (fichier MSI), compatible IE6 et IE7, et permettant les fonctionnalités suivantes :

  • Explorer et modifier l'arbre DOM d'une page web.
  • Éditer les attributs et styles CSS des noeuds HTML, avec rendu en temps réel.
  • Complétion pour l'ajout d'attributs ou de styles CSS.
  • Localiser et sélectionner un élément HTML sur la page web.
  • Valider HTML, CSS, WAI, et les liens vers des flux RSS.
  • Afficher les tailles des images, les tailles de fichiers, la localisation, et les textes info-bulle.
  • Redimensionner immédiatement la fenêtre du navigateur vers une résolution donnée.
  • Supprimer le cache navigateur, les cookies (tout ou partie).
  • Afficher la source HTML et CSS de manière formatée et colorée.

Pour l'installer et le prendre en main, rien de plus simple :

  1. Téléchargez-le ici
  2. Installez-le
  3. Lancez Internet Explorer
  4. Dans la barre d'outils, cliquez sur l'icône Icone IE Developer Toolbar : IE Developer Toolbar s'affiche alors en bas de votre fenêtre.
  5. Pour enlever IE Developer Toolbar, cliquez sur le même icône.
  6. Pour voir la démo : cliquez ici

Enfin, pour ceux qui regretteraient que cet outil n'inclut pas de debugger JavaScript, sachez que la future version de IE Developer Toolbar pour IE8 (IE8 Developer Tools) le prévoit et sera incluse dans IE8 même. Vous pouvez d'ailleurs d'ores et déjà télécharger et tester la version Beta1.