Mises à jour de F12 dans Developer Channel

Article
03/04/2016

Internet Explorer Developer Channel offre un certain nombre de mises à jour intéressantes, grandes et petites, des outils de développement F12. Les clients Windows 8.1 et Windows 7 SP1 qui exécutent Internet Explorer 11 sont éligibles au téléchargement. Essayez les fonctionnalités décrites ci-dessous et faites-nous part de vos commentaires par le biais de Microsoft Connect.

Nouveautés

Commençons par examiner les nouveautés de l’interface utilisateur des outils F12 dans son ensemble, puis étudions les mises à jour propres à chaque outil.

Modifications apportées à l’interface utilisateur F12
Console
Explorateur DOM
Débogueur
Émulation
Réactivité de l’interface utilisateur
Mémoire

Modifications apportées à l’interface utilisateur F12

Nouvelles icônes et notifications

Les icônes des outils Mémoire et Profileur ont changé.

La barre d’icônes comporte désormais des indicateurs relatifs aux erreurs survenues dans l’outil Console, aux modifications des paramètres de l’outil Émulation, ainsi qu’aux sessions de profilage actives dans les outils Mémoire, Profileur et Réactivité de l’interface utilisateur. L’image ci-après illustre les nouvelles icônes, ainsi que des notifications présentes sur les icônes d’outil Console et Mémoire signalant l’affichage de deux erreurs dans la Console et l’existence d’une session de profilage en cours pour l’outil Mémoire.
Navigation dans des sur-ensembles au sein des outils via la touche F6

L’utilisation de la touche F6 est comparable à celle de la touche Tabulation pour naviguer dans un outil, mais permet d’accéder à une sélection d’éléments les plus fréquemment utilisés dans un volet d’outils plutôt qu’à l’ensemble des éléments sélectionnables. Cette méthode fait partie intégrante d’un système d’optimisation globale de l’utilisation du clavier pour naviguer dans et entre les outils.
Déplacement en avant et en arrière parmi les outils récemment utilisés à l’aide du clavier

Utilisez la combinaison de touches CTRL+[ pour revenir en arrière dans votre historique de navigation parmi les outils, et la combinaison CTRL+] pour vous déplacer vers l’avant dans cet historique. Cette opération est comparable à l’utilisation des flèches Retour et Suivant pour vous déplacer dans le navigateur.
Accès rapide au mode de document

Vous voulez accéder au mode de document sans changer d’outil ? Nous avons ajouté une nouvelle liste déroulante dans la partie supérieure de l’interface qui vous donne accès au mode de document depuis n’importe quel outil.

Modifications de l’outil Console

Console.timeStamp()

Lorsqu’elle est appelée depuis l’outil Console ou dans le code, cette méthode affiche dans l’outil Console le nombre de millisecondes pendant lequel l’onglet actuel du navigateur est resté ouvert. Si cette méthode est appelée pendant l’exécution d’une session de profilage avec l’outil Réactivité de l’interface utilisateur, elle crée une marque utilisateur sur la chronologie de la session avec un horodateur reposant sur le temps écoulé depuis le début de la session.
Suppression de tous les messages de la console via CTRL+L
Saisie semi-automatique précise

La saisie semi-automatique de la console n’inclut plus les propriétés d’indexeur, garantissant ainsi des suggestions de saisie semi-automatique plus claires et plus précises.

$, $$, $x, $0-$5, et $_ ont été ajoutés à la liste de saisie semi-automatique de l’outil Console pour faciliter la tâche des utilisateurs qui emploient ces caractères et pour améliorer la cohérence du comportement de l’outil Console avec celui des autres navigateurs.
Indicateur de message obsolète

Si vous avez choisi de désactiver l’option Effacer sur navigation, l’icône des messages de console les plus anciens est grisée pour faciliter la distinction entre les messages de la page active et ceux des pages précédentes de votre historique.

Modifications de l’outil Explorateur DOM

Barres de modification dans le volet des styles calculés

Les barres de modification (identifiant les propriétés modifiées, ajoutées et supprimées à l’aide de couleurs différentes) dont les utilisateurs bénéficiaient dans le volet Styles apparaissent désormais dans le volet de styles Calculé.

Modifications de l’outil Débogueur

Désignation de mappages de sources

Vous pouvez cliquer avec le bouton droit de la souris sur l’onglet d’un document dans l’outil Débogueur et spécifier un mappage de source. Cette opération permet d’utiliser des mappages de sources avec un code livré dont le commentaire de mappage de source a été supprimé.
Saisie semi-automatique des espions

Désormais, lorsque vous ajoutez un espion, vous obtenez des suggestions de saisie semi-automatique.
Inspection de valeur renvoyée

Lors d’un arrêt sur une fonction comportant une valeur renvoyée, effectuez un pas à pas détaillé dans la fonction jusqu’à l’accolade fermante. La valeur renvoyée s’affichera dans la partie Variables locales du volet Espions. Lorsque vous reprendrez l’exécution pas à pas, la valeur sera renvoyée au code qui l’a appelée.

Pour découvrir une rapide démonstration de ce comportement, essayez le code ci-après dans l’outil Console :

function showval() { var x = 0; x++; debugger; return x; } showval();

Ce code appelle la fonction, puis marque un arrêt sur debugger, et vous pouvez alors effectuer un pas à pas détaillé dans cette fonction pour visualiser la valeur renvoyée.
Sélection multiple de points d’arrêt

Les combinaisons CTRL+CLIC, MAJ+CLIC et CTRL+A permettent de sélectionner plusieurs points d’arrêt dans le volet Points d’arrêt.
Exécution jusqu’à l’arrêt suivant ou omission de plusieurs arrêts

Appuyez sur F5 pour poursuivre l’exécution jusqu’à l’arrêt suivant. Maintenez la touche F5 enfoncée pour omettre plusieurs arrêts successifs jusqu’à ce que vous relâchiez la touche F5.
Points d’arrêt et points de trace d’événement

Ces éléments fonctionnent de façon très comparable aux points d’arrêt et aux points de trace déjà présents dans les outils F12, mais se déclenchent lors de l’activation d’un événement spécifique, et non pendant l’exécution d’un bloc de code particulier. Chacun d’eux comporte un filtre conditionnel facultatif pour vous aider à limiter son étendue à l’instance spécifique d’un événement que vous souhaitez examiner. Vous pouvez ajouter ces éléments à l’aide des icônes Ajouter un point de trace d’événement et Ajouter un point d’arrêt d’événement qui sont mises en surbrillance dans l’image ci-après.

Modifications de l’outil Réactivité de l’interface utilisateur

Importation/exportation des sessions de performance

Vous n’avez pas besoin de reproduire votre cas de test chaque fois que vous souhaitez analyser les données qui en résultent ou partager ces données avec un collègue. Les icônes d’importation (dossier) et d’exportation (disquette) figurant dans la barre d’icônes de l’outil Réactivité de l’interface utilisateur vous permettent d’enregistrer vos captures instantanées de mémoire dans un fichier qui pourra être importé ultérieurement.
Aperçu des images

Si vous avez vu une requête HTTP concernant une image en vous demandant de quelle image il s’agissait, un aperçu de l’image s’affiche désormais dans les détails de l’événement.
Filtrage des événements

Bien que de taille modeste, le bouton Filtrer les événements offre de puissantes fonctionnalités. Le menu caché derrière ce bouton vous permet de filtrer les événements de différentes manières ayant chacune une incidence significative.
- Filtre de nom d’événement
  
  Vous pouvez définir un filtre sur n’importe quel événement dont le nom correspond au texte du filtre.
- Filtre d’activité de l’interface utilisateur
  
  À l’aide des cases à cocher, vous pouvez exclure les catégories d’événements les plus étendues pour vous concentrer plus facilement sur le domaine qui vous intéresse. Par exemple, si vous êtes uniquement intéressé par l’activité réseau, vous pouvez filtrer toutes les activités parasites de l’interface utilisateur et du nettoyage de la mémoire.
- Filtre de seuil de temps
  
  Cette fonctionnalité filtre les événements de niveau supérieur d’une durée inférieure à 1 ms. Dans de nombreux scénarios, cette opération simplifie considérablement la vue en cascade et vous permet de vous concentrer sur les événements présentant l’impact le plus significatif.
Événements de script HTML5

Si vous utilisez des écouteurs de requêtes multimédias ou des éléments MutationObservers, vous pouvez désormais identifier leurs coûts respectifs lors de l’exécution d’une session de profilage des performances.
Regroupement par cadre

Le bouton situé entre le menu déroulant Trier par et le menu Filtrer les événements active ou désactive la fonctionnalité Regroupement par cadre. Cette fonction regroupe les événements de niveau supérieur dans leur unité de travail (ou « cadre ») correspondante au cours des périodes pendant lesquelles des animations/mises à jour visuelles sont survenues. Les cadres sont traités comme les autres événements, de sorte qu’ils peuvent être triés et filtrés, et ils fournissent un Résumé du temps inclusif.
Mesures utilisateur

Si vous utilisez l’API performance.mark() pour ajouter des triangles à la chronologie, indiquant le moment où des événements spécifiques sont survenus, l’API performance.measure() accroît l’utilité des marques de performance. Utilisez performance.measure() pour créer un événement Mesure utilisateur incluant la durée entre deux événements performance.mark(), cliquez sur cet événement avec le bouton droit de la souris et utilisez l’option Filtrer jusqu’à l’événement pour sélectionner uniquement les événements survenus entre les deux marques.
Colorisation des éléments DOM

Cette fonctionnalité colorise les éléments DOM, les littéraux de chaîne et les littéraux de nombre. Outre le fait d’uniformiser l’apparence des différents outils F12, cette fonction contribue à accroître l’attrait visuel de l’outil Réactivité de l’interface utilisateur.
Résumé de la sélection

Lorsque vous sélectionnez une partie de la chronologie, le volet des détails d’événement affiche un résumé de cette sélection. Pointez sur différents segments du graphique circulaire pour obtenir une info-bulle présentant la catégorie d’événement du segment concerné.
Prise en charge de console.timeStamp()

L’utilisation de la méthode console.timeStamp() dans votre code ou dans la console pendant une session de profilage crée une marque utilisateur sur la chronologie indiquant le temps écoulé depuis le début de la session de profilage.

Modifications de l’outil Mémoire

Repli des dominateurs

Le repli des dominateurs contribue à simplifier le contenu d’une capture instantanée en supprimant des vues de niveau supérieur les objets qui sont des composants logiques d’un autre objet (par exemple, un élément <BR> au sein d’un élément <DIV>, ou une étendue détenue par une fonction) et qui constituent généralement des détails supplémentaires n’améliorant pas votre compréhension des données, mais risquant de vous faire perdre votre temps.

Par exemple, l’image ci-après illustre les vues avant et après et démontre la façon dont le repli des dominateurs améliore la pertinence des informations fournies par l’outil. La vue repliée présente 30 éléments < DIV > HTML, qui représentent 15,64 Mo de mémoire, et qui sont détenus par des nœuds DOM détachés. Dans de nombreux cas, il importe peu de connaître la composition d’un objet ; il suffit de savoir qu’un objet est trop volumineux ou qu’il manque de mémoire (en particulier en cas d’utilisation de bibliothèques tierces).
Colorisation des éléments DOM, des littéraux de chaîne et des littéraux de nombre

Cette fonctionnalité colorise les éléments DOM, les littéraux de chaîne et les littéraux de nombre. Outre le fait d’uniformiser l’apparence des différents outils F12, cette fonction contribue à renforcer l’attrait visuel de l’analyse de la mémoire.
Filtrage des références circulaires des racines

Vous voulez être en mesure de rechercher la composition d’un objet sans vous perdre à votre insu dans un chemin d’accès de références circulaires ? Cette fonctionnalité détecte les références enfants circulaires et les « tronque » pour que vous ne soyez pas désorienté en les parcourant à l’infini. En outre, elle annote ces références pour signaler clairement qu’elles ont été « tronquées ».
Importation/exportation de session

Vous n’avez pas besoin de reproduire votre cas de test chaque fois que vous souhaitez analyser les données qui en résultent ou partager ces données avec un collègue. Les icônes d’importation (dossier) et d’exportation (disquette) figurant dans la barre d’icônes de l’outil Mémoire vous permettent d’enregistrer vos captures instantanées de mémoire dans un fichier qui pourra être importé ultérieurement.

Modifications de l’outil Émulation

Persistance et réinitialisation des paramètres

Une icône Conserver les paramètres d’émulation a été ajoutée à l’outil Émulation. Cette fonction conserve vos paramètres d’émulation actuels jusqu’à ce qu’ils soient spécifiquement désactivés, ce qui vous permet de travailler dans le navigateur, puis de fermer et rouvrir ce dernier en retrouvant vos paramètres d’émulation inchangés. Cette icône est suivie de l’icône Réinitialiser les paramètres d’émulation qui permet de rétablir rapidement les valeurs par défaut de l’outil.

Rubriques associées

Télécharger Internet Explorer Developer Channel pour Windows 8.1

Téléchargement d’Internet Explorer Developer Channel pour Windows 7 SP1