Les outils F12 d'Internet Explorer 11 au crible
Internet Explorer 11 apporte son lot de nouveautés pour les développeurs de sites web. Aux côtés des travaux d'optimisation réalisés par Microsoft, notamment en matière de performance JavaScript (lire l'article : Internet Explorer 11 en beta pour Windows 7), les outils disponibles par le biais de la touche F12 ont été enrichis pour l'occasion par l'éditeur à tous les étages : console, explorateur DOM, émulateur d'écran, gestionnaire de mémoire, supervision des performances JavaScript...
Télécharger Internet Explorer 11 pour Windows 7
La Console d'Internet Explorer 11
La Console signale des messages d'erreur lors de l'exécution du code d'une page web. Elle peut faire apparaitre quatre grand types d'indicateur : journalisation, erreur, avertissement et information. "Les chaînes de messages peuvent contenir du texte, des variables, ou des résultats d'expressions, ou une combinaison de l'ensemble", indique Microsoft. La Console permet aussi d'envoyer des messages depuis le code à la console. Objectif : signaler des erreurs, émettre des alertes ou journaliser l'état. La Console est dotée d'une API de consultation, et d'une interface en lignes de commande pour envoyer des instructions.
Nouveauté de la Console avec Internet Explorer 11 : mapping des erreurs WebGL et localisation JavaScript correspondante, arrivée des primitives dans dans l'auto-complétion, possibilité de déboggage des sites et applications web multi-threadés. L'API de débogage de la Console s'enrichit de nouvelle méthodes (de comptage, regroupement, de gestion du temps...), et l'interface en ligne de commandes s'enrichit également d'un dispositif de suggestion par auto-complétion. Microsoft a réalisé beaucoup d'autres petites améliorations. Il est par exemple possible de modifier la valeur d'une variable en exécutant un code, sans avoir à recharger la page.
Explorateur DOM d'Internet Explorer 11 (DOM Explorer)
L'explorateur DOM a pour but de fournir un accès rapide aux feuilles de style, et les éditer. Il permet de visualiser le code HTML et CSS associé à un élément sélectionné dans le DOM d'une page HTML, et de visualiser dans le navigateur le rendu des modifications de code réalisées à la volée sans avoir à recharger la page web.
Nouveauté avec Internet Explorer 11 : un dispositif de suggestions de saisie semi-automatique d'attributs HTML et propriétés CSS (auto-complétion), la possibilité de glisser des nœuds DOM et de les réarranger.
Le Débogueur d'Internet Explorer 11 (Debugger)
Le débogueur est conçu pour analyser la manière dont le code s'exécute. Le débogueur d'IE permet classiquement de réaliser des pauses en cours d'exécution, et d'obtenir ainsi une vision sur l'état des variables et objets à chaque étape.
Nouveauté avec Internet Explorer 11 : amélioration du sélecteur de fichiers, interface multi-documents pour faciliter la gestion de plusieurs scripts, conservation de points d'arrêt évitant de perdre les états de débogage, barre de défilement surlignant les points d'arrêt. Internet Explorer 11 facilite également la compression ou minification du code et le monitoring des tâches.
L'Outil Réseau d'Internet Explorer 11 (Network tool)
L'Outil Réseau d'Internet Explorer fournit le détail de la performance réseau de chaque requête intervenant lors du chargement d'une page web : code HTML, code JavaScript, images, CSS...
Nouveautés avec Internet Explorer 11 : amélioration du niveau de granularité des informations relatives au temps d'exécution des requêtes, et des données de compression. L'outil Réseau d'IE11 fournit une vision qui se veut plus claire du niveau de bande passante consommée par une page selon ses ressources (poids et temps écoulé en fonction de l'élément). Il est également conçu pour identifier rapidement une requête ralentissant l'ensemble de la page. Enfin, il permet de déboguer plus facilement les requêtes Ajax en donnant accès aux données de leurs entêtes (tout comme aux corps de la demande et de la réponse). Il suffit pour cela de sélectionner un objet de la page, puis de cliquer sur l'information voulue apparaissant dans le menu supérieur.
L'Outil de Réactivité de l'interface utilisateur (UI Responsiveness)
L'Outil de Réactivité de l'UI d'Internet Explorer 11 teste la performance d'exécution d'une page, et ce élément par élément (chargement, exécution des styles, des scripts, du rendu, décodage des images...). Il constitue une aide pour identifier les points ralentissant le temps de chargement d'une page.
L'outil n'existait pas dans IE10. Son principal point fort ? Il permet d'identifier précisément les sources d'activité CPU en jouant des scénarios utilisateur par le biais de la timeline. Il offre ainsi un bon moyen d'optimiser les codes de test.
Le profileur d'Internet Explorer 11 (Profiler)
L'Outil de profilage d'Internet Explorer 11 est dessiné pour évaluer la performance JavaScript. Il permet de profiler les fonctions JavaScript exécutées lors d'une session, visualiser combien de fois elles sont appelées, et estimer leur temps d'exécution.
Nouveautés avec Internet Explorer 11 : une interface graphique renouvelée qui se veut plus claire et réactive offrant la possibilité de tracer plus précisément les fonctions exécutées et isolées celles posant problème.
L'outil d'analyse de la mémoire d'Internet Explorer 11 (Memory tool)
Cet outil n'existait pas dans Internet Explorer 10. Il permet d'analyser la mémoire consommée lors du chargement et de l'affichage d'une page web, et ainsi de diagnostiquer les éventuelles fuites de mémoire.
Il s'articule autour d'une timeline pour suivre le niveau de mémoire consommée, avec la possibilité de réaliser des instantanées pour visualiser l'utilisation de mémoire sur des points précis (sur des objets...).
L'Outil d'émulation d'Internet Explorer 11 (Emulation tool)
C'est également un nouvel outil, inauguré avec Internet Explorer 11. Utile pour le responsive design, il permet d'émuler le rendu des pages web en fonction de configuration d'écran particulière (taille et résolution), avec à la clé plusieurs navigateurs possibles : IE 6, 7, 8, 9, 10, Chrome, Firefox, Safari et Opera (consulter aussi notre astuce : Test de site web, comment faire tourner Internet Explorer 6, Internet Explorer 7 et Internet Explorer 8 sur la même machine).
Autre fonctionnalité : la capacité à combiner les analyses de rendu avec le test des contenus web géolocalisés, via la saisie de coordonnées géographiques (latitude et longitude).
Documentation en anglais sur les outils F12 d'Internet Explorer 11 (sur MSDN)