Internet Explorer 8

Internet Explorer 8, Enfin un FireBug Like d’intégrer !

C’est avec une grande surprise et une grande joie que je découvre un outil pour les développeurs web, intégré dans Microsoft Internet Explorer 8.

Je ne compte plus le nombre de fois où j’ai pu maudire les développeurs d’Internet Explorer, pour n’avoir jamais pensé aux pauvres développeurs web.
Bien sûr des outils existent, comme le compagnon JS ou la Debug Bar, mais n’arrivant malheureusement pas à la cheville de FireBug, ces outils restent des gadgets sans grande valeur.

Mais cette fois-ci Microsoft va dans le bon sens. Cet outil ressemble étrangement à Firebug dans ses fonctionnalités, mais il est vraiment le bienvenue !

Acide test 2 ie8Avant de continuer un petit bémol. Voilà ce que l’on peut lire à la page suivante, http://msdn.microsoft.com/fr-fr/ie/dd452452.aspx :
« Internet Explorer 8 : une occasion de faire un code exemplaire
IE 8 introduit un moteur de rendu plus respectueux des standards avec notamment l’implémentation complète des spécifications de la norme CSS 2.1. C’est donc une opportunité parfaite pour s’assurer que votre site est lui-même en phase avec les standards édités par les organismes indépendants. Voici une liste d’outils, de techniques et de conseils qui vous permettront de garantir tant la conformité de votre site web que le confort des internautes »

Internet explorer 8, Acide test 3Ils n’ont pas peur chez Microsoft, IE8 ne passe pas les 13/100 à l’acid test 3 et la version deux n’en parlons même pas.

Nous allons donc encore devoir essuyer les plâtres de ce nouveau moteur de rendu pas vraiment plus performant que l’autre (Et selon un article sur PcInpact, le moteur de rendu Trident aurait été entièrement revu… http://www.pcinpact.com/actu/news/50166-ie8-questions-problemes-microsoft-reponses.htm).

Bon revenons à ce qui nous emmène ici.

Enfin un vrai Firebug Like dans Internet Explorer !
Si je me permets l’analogie de cet ensemble d’outils avec Firebug, c’est que les fonctionnalités sont très proches. L’outil de développement de IE8 intègre d’ailleurs des éléments que l’on retrouve sous forme de module dans Mozilla Firefox (ColorZilla, QuickJava, …).

Pour l’activer une petite pression sur la touche F12 de votre clavier (ou Outils->Outils de développement) et le miracle s’exécutera sous vos yeux ébahis (j’en fais peut-être un peu trop…).

IE8 est un navigateur Internet conforme (en partie) aux standards, ce qui implique que certains sites développés comme au temps de l’HTML 4.1 (sans réel respect des standards, et disons le franchement, comme des porcs) vont devoir être remaniés. Cependant Microsoft a intégré un émulateur du moteur de rendu d’Internet explorer 7. Il est activable grâce à un simple bouton se trouvant à la droite de la barre d’adresse (ie8 emulateur ie7).

Afficher le DOM d’une page web :

IE8 Explorateur DOMComme sous Firebug, vous pouvez visualiser le DOM (Document Object Model) sous la forme d’une arborescence d’éléments. Il vous est bien sûr possible de sélectionner un élément, soit dans l’arborescence, soit directement dans la page grâce au sélecteur (l’icône avec la flèche). Il vous est aussi possible d’éditer les items de l’arborescence, la répercutions de vos modifications se fera immédiatement sans besoin de recharger la page. Il est évident que les modifications apportées ne seront pas enregistrées sur les fichiers serveurs !
Chemin : Outils de développement -> onglet HTML

Débogage de JavaScript :

Variable locale JavaScriptDans l’outil de développement on retrouve un vrai débogueur JavaScript, un vrai dans le sens où celui-ci va enfin servir et être pratique !
Cet outil permet de disposer des points d’arrêt où l’on souhaite dans les scripts et cela sans modifier le script côté serveur. Il est aussi possible de visualiser les variables JS locales et leurs valeurs sous la forme d’un arbre.
L’avantage de ce débogueur réside dans la complétude de ses outils et dans le fait que l’on reste dans Internet Explorer ainsi les outils agissent en réelle interaction avec lui.
Chemin : Outils de développement -> onglet Script

Profiler du code JavaScript :

Javascript ProfilerLe profilage permet de connaître dans l’ordre d’exécution les fonctions JavaScript utilisées, ainsi que le fichier et à quelle ligne elles sont définies. Dans le rapport effectué, il est aussi mentionné le nombre de fois où elles ont été effectuées ainsi que le temps inclusif.
Il est possible d’afficher le rapport sous forme de liste ou d’arbre, et même de l’exporter.
Chemin : Outils de développement -> onglet Profileur

layout viewDisposition d’éléments (Layout view) :

Sélectionner un élément dans la page html, puis grâce à cet outil visualiser de manière graphique ses options de disposition, tel que : marging, padding, offset, border, …
Chemin : Outils de développement -> onglet HTML -> option Disposition

Css temps réelleModification CSS en temps réelle :

Comme proposé dans Firebug, l’outil de développement de IE8 intègre la possibilité de modifier en direct les feuilles de styles afin d’avoir un rendu en direct sans recharger la page. Bien sûr, les modifications faites dans l’outil ne s’enregistrent pas dans les feuilles de styles sur le serveur.
Chemin : Outils de développement -> onglet CSS

Afficher distinctement les éléments d’une page :

Afficher les contours d'élémentLors des développements d’un site, il n’est pas rare lors de la phase de l’application du graphisme de devoir repérer différents éléments dans une page. Sur les anciennes versions de IE on se contentait d’ajouter des attributs dans la feuille de styles afin de faire ressortir les éléments en affichant par exemple leur contour. Ce temps est terminé, il est maintenant possible d’afficher les contours d’éléments sans le spécifier dans la CSS. L’outil propose des éléments type (tableau, div, image), mais il vous propose aussi d’afficher d’autres types d’éléments et même de leurs affecter une couleur.
Chemin : Outils de développement -> menu Contour

Test d’affichage de page sur différente résolution en deux clics :

Vous avez la possibilité de redimensionner le navigateur dans les résolutions suivantes :

  • 800 x 600
  • 1024 x 768
  • 1280 x 768
  • 1280 x 1024

Il vous est aussi possible de paramétrer la résolution à votre convenance.
Chemin : Outils de développement -> menu Redimensionner

Outils pour les images :

L’outil de développement nous propose plusieurs options pour les images :

  • Désactiver les images
  • Afficher les dimensions des images : largeur par hauteur
  • Afficher la taille des fichiers images : leur poids
  • Afficher le chemin des images
  • Afficher la légende : le texte contenu dans l’attribut « alt »
  • Afficher le rapport d’image : Ouvre une nouvelle page ou un rapport est associé à chaque image. Ce rapport contient la résolution réelle de l’image, la résolution de l’image affichée dans le navigateur, son poids, et d’autres informations.

Chemin : Outils de développement -> menu Images

Pipette à couleurs :

Encore un outil pratique, la pipette. Cet outil permet de connaître le code couleur d’un point de la page. Pour cela il vous suffit de pointer la couleur voulue et de cliquer.
Chemin : Outils de développement -> menu Outil -> Afficher le sélecteur de couleur

Pipette à couleur

L’outil de développement de Microsoft Internet Explorer 8 offre encore bien d’autres possibilités. Il serait long de tous vous les présenter, surtout que beaucoup sont similaires à ce que l’on connaît déjà avec Firebug.

Je pense que l’on peut remercier Mozilla Firefox, c’est en partie grâce à ce navigateur que Microsoft se met de grands coups de pied au cul pour améliorer leur navigateur !
Il était temps que Le géant de Redmond s’active et nous propose un navigateur Internet digne de ce nom. Les équipes de développement ont encore du travail pour intégrer à la lettre les spécifications W3C, certes ce ne sont pas les seuls mais pour Microsoft le fossé est grand et il va vraiment falloir le combler.

Source :
coolwebdeveloper.com

Tagués avec : , , ,
Publié dans Outils
Un commentaire pour “Internet Explorer 8
1 Pings/Trackbacks pour "Internet Explorer 8"
  1. […] vous pouvez vous reférer aux pages suivantes: Site officiel microsoftAutres articles : Mon Beulogue (fr)coolwebdeveloper.com […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*