Pipo Bimbo Info

Ecolo, techno, info, rigolo et rideau !

Les outils de développement web d’Internet Explorer 8

| 0 Commentaires

Alors que Microsoft était apparu comme franchement à la traîne avec ses précédentes versions d’Internet Exlorer en terme d’outils à destination des développeurs, il semblerait que ce retard ait été enfin comblé avec notamment l’ajout d’une barre d’outil destinée à faciliter la vie des développeurs web. Qu’en est-il réellement de cette barre ? véritable outil ou simple gadget ?

Dans un article précédent, je passais rapidement en revue les outils de développement disponibles pour les principaux navigateurs du marché. Dans cet article, je vais vous détailler cet outil de développement web fourni avec IE8 puisque je l’ai un peu utilisé dernièrement au travail.

  • Accès

    Nouveauté par rapport à IE 7 : cette barre d’outil est directement intégrée dans le navigateur. Ce n’est plus la peine de télécharger et d’installer un plugin comme c’était le cas précédemment avec Debug bar, Web Developper Toolbar ou IEPro.
    L’accès se fait directement, de 2 manières :

    • soit via un raccourci clavier : la touche F12
    • soit via le menu Ouils -> Outils de développement

    Dans les 2 cas une fenêtre autonome apparaît. En effet, l’outil est suffisamment complexe pour nécessiter une véritable fenêtre à part entière. Pas de soucis cependant, cette fenêtre peut être rattachée au pied de page de la fenêtre principale du navigateur.

    Vue en fenêtre autonome
    Vue en barre d’outil en pied de page
  • Principales fonctionnalités

    Visiblement Microsoft s’est très largement inspiré de Firbug pour développer cet outil. On retrouve donc la plupart des fonctionnalités de Firebug, devenues des classiques car reprises par d’autres outils de déboggage sous Chrome ou Safari.

    • Explorateur de DOM HTML :
      Onglet explorateur DOM HTML 

      Il permet de naviguer dans la structure de la page HTML (DOM) en affichant les caractéristiques de chaque balise (nœud): son style, ses attributs HTML, sa disposition, etc. L’affichage de la disposition du nœud est très utile pour manipuler les différents espacements qui interviennent dans le modèle de boîtes de IE (margin, padding, border, offset).

    • Explorateur de propriétés CSS :
      Onglet explorateur CSS 

      Il permet d’afficher des feuilles de style liées à la page HTML et de rajouter à chaud des propriétés.

    • Scripts:
      Onglet des scripts

      il permet le déboggage du JavaScript grâce à la possibilité de poser des points d’arrêt, des espions, de faire du pas à pas, etc. La présence d’une console JavaScript permet d’évaluer une expression même au cours d’un pas à pas.

    • Profileur:
      Onglet profileur 

      Il permet de générer un rapport indiquant la liste de fonctions qui ont été utilisées, leur ordre d’exécution, le temps consommé.

    Toutes ces fonctionnalités sont de la même qualité que celles de Firebug. Il est à noter que le changement à chaud du code HTML ou des propriétés CSS est bien pris en compte, ce qui n’était pas le cas sur les plugins précédents d’IE.

  • Atouts

    Cette barre d’outils a quelques atouts en poche que ne possède pas Firebug.

    • La possibilité de switcher rapidement entre les différents modes navigateur (7 et 8) et ainsi qu’entre les modes document (quirks, IE 7 , IE8)
      mode navigateur
      Mode document
    • Des raccourcis permettant de redimensionner rapidement une fenêtre et ainsi de basculer facilement entre plusieurs résolutions.
      Redimensionnement rapide
    • Une gestion du cache et des cookies permettant de vider entièrement ou partiellement le cache ou les cookies de la page.
      Gestion du cache
    • Elle est intégrée directement dans IE et ne nécessite pas d’installation supplémentaire.

    C’est bien la preuve que Microsoft s’est enfin décidé à rattraper son retard sur Firefox, voire même à le dépasser. Attention Mozilla, il va falloir s’y remettre!

  • Défauts

    Malheureusement cette barre n’est pas sans défaut. Certains sans être rédhibitoires sont tout de même assez handicapant.

    • Il n’y a pas d’onglet équivalent au « réseau » de Firebug, permettant de suivre les requêtes échangées avec le serveur. Le déboggage Ajax s’avère donc mal aisé
    • Dans la fenêtre de style au survol d’un lien vers une image ou d’un code couleur il n’est pas possible d’afficher une vignette avec la couleur ou l’image correspondante comme on peut trouver dans Firebug
    • Dans la fenêtre ‘Disposition’ de l’onglet HTML, il n’y a pas d’affichage des margin et padding lors de l’exploration des éléments de la page HTML
    • Le fonctionnement semble boggé quand on navigue avec la fenêtre ouverte. Il semblerait que la connexion avec le DOM de la fenêtre courante du navigateur se perde, empêchant tout deboggage. Ça peut être assez gênant.

En conclusion, la sortie de cet outil a été une véritable bouffée d’air frais pour tous les développeurs web pro microsoft ou simplement contraints de travailler sur IE. Il semble que la firme de Redmond se soit enfin réveillée et qu’elle met les bouchées doubles pour rattraper son retard.

Références :
Si vous voulez pousser un peu plus loin l’utilisation de cette barre d’outil vous pouvez vous référer aux pages suivantes:
Site officiel microsoft
Autres articles :
Mon Beulogue (fr)
coolwebdeveloper.com (en)

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.