Internet Explorer 9 Les outils de développement en détails - Partie 1 : Introduction
Dans cette série, nous allons voir en détail les outils de développement inclus dans Internet Explorer. Ils peuvent être utilisés pour analyser la structure des pages, améliorer leur conception, déboguer leurs scripts, les optimiser, analyser le trafic réseau, et bien plus encore.
- Partie 1 – Introduction
- Partie 2 – Travailler avec HTML et CSS
- Partie 3 – Débogage de script JavaScript
- Partie 4 - Profilage de script JavaScript
- Partie 5 – Performance et analyse des échanges réseaux
Mise en route
Les outils de développement sont inclus en standard dans Internet Explorer (pas besoin d'installer quoi que ce soit d'autre), sous IE8, IE9, et IE10 Platform Preview. Pour en savoir plus et télécharger IE, vous pouvez aller sur ces sites :
- IE Test Drive - téléchargements de IE9 et IE10, exemples, tests et ressources
- Beauty of the Web - fonctionnalités de IE9, sites vitrine et ressources
Utiliser les outils de développement
Très simple : appuyez juste sur F12 ou dans le menu Outils-> "Outils de développement F12" pour démarrer les outils.
(Sous Windows 7, pour caler une fenêtre à droite ou à gauche : touche Windows + touche de direction)
Un rapide coup d'oeil
Jetons un oeil rapide aux principales caractéristiques, nous les détaillerons dans les prochains billets. Il y a six onglets distincts: HTML, CSS, Console, Script, Profileur, et Réseau.
L'onglet HTML
L'onglet HTML est idéal pour l'inspection de votre page, la modification de valeurs, et la visualisation des effets de style CSS.
La partie droite de l'écran contient la liste des attributs CSS (Style), la hiérarchie des styles (Suivre les styles), une représentation graphique du layout (Disposition), et un moyen de définir ses propres attributs (Attributs).
L'onglet CSS
L'onglet CSS affiche les classes de style CSS utilisées dans la page Html, et vous permet de visualiser un fichier CSS en particulier, de le modifier à la volée ainsi que d'effectuer des recherches.
Combiné avec les fenêtres de droite sur l'onglet HTML, il y a beaucoup de façons de visualiser et de modifier vos CSS. (Plus sur la façon de modifier le HTML et le CSS dans le prochain billet)
Les onglets Console et Script
L'onglet Script vous permet de travailler sur le JavaScript, de mettre des points d'arrêt, de déboguer et de détecter les erreurs.
Le volet à droite contient les vues Console (supportant console.log() ainsi que d'autre fonctions), les points d'arrêt, les variables locales, les Espions et de Pile d'appels.
Une nouveauté dans IE9 est la possibilité de formater le JavaScript, ce qui peut rendre un script compressé (dont illisible) facile à lire et à déboguer :
L'onglet Console est un peu comme le volet de la console de l'onglet Scripts, offrant une plus grande surface pour afficher les messages et exécuter des commandes de script.
L'onglet Profileur
L'onglet Profileur vous permet d'analyser l'exécution du JavaScript. Il suffit de cliquer sur "Démarrer le profilage", de charger une page ou d'utiliser la fonctionnalité à analyser de la page, puis de cliquer sur "Terminer le profilage".
Vous verrez un rapport de synthèse indiquant le nom des fonctions, le compteur d'appel, le temps d'exécution. Nous verrons plus d'informations sur les onglets de script et de profilage dans les billets 3 et 4 de cette série d'articles.
L'onglet Réseau
L'onglet Réseau est une nouveauté de IE9, il permet la capture et l'analyse des échanges réseaux.
Comme pour le profilage de script, il suffit de démarrer la capturer et de charger / utiliser une ou plusieurs pages. Vous verrez les URLs requêtées, les réponses, les caractéristiques de chaque réponse, et durée de chaque étape. Double-cliquez sur une information pour voir son détail :
Il y a de nombreuses choses à dire ici, la partie 6 donnera les détails et techniques pour utiliser cette fonctionnalité.
Options du menu
- Images et Rapport de lien
- Appliquer un contour aux éléments (tables, divs, etc...)
- La gestion du cache
- Le paramétrage du User-Agent (UA)
- Effacer / désactiver les cookies
Désactiver les scripts, le CSS, et le bloqueur de fenêtres contextuelles
- Les outils pour redimensionner le navigateur, mesurer des éléments, et sélectionner les couleurs
- La validation de la page
Vous pouvez également modifier le Mode de navigation et le Mode de document.
Nous verrons cela dans le prochain billet, mais la version courte est que le Mode de Navigation permet d'envoyer différents User-Agent (UA), simulant ainsi différents navigateurs d'un point de vue serveur, et le Mode de document change le mode de rendu de la page qui sera utilisé par IE.
Ressources Internet Explorer
Enfin, voici quelques ressources pour vous aider :
- IE Test Drive - Téléchargements, exemples, tests, et ressources
- Beauty of the Web - Caractéristiques IE9, sites vitrine, et ressources
- IE Developer Center
- Dev Tools Raccourcis clavier
- IE Dev Tools Tutorial sample site
- Le screencast de Chris Bowen sur les outils de développement - partie du The Code Project Virtual Tech Summit (gratuit)
La suite dans les prochains billets, j'espère que vous apprécierez les outils de développement!
Ce billet est une adaptation du post de Chris Bowen (Principal Developer Evangelist for Microsoft) : Internet Explorer 9 Developer Tools Deep Dive – Part 1: Introduction