Améliorations apportées aux outils de développeur F12 dans Internet Explorer 11

À propos de cette mise à jour

Pour développer des pages Web très, vous avez besoin de compétences, ainsi que les outils pour rechercher et résoudre les problèmes qui surviennent inévitablement de codage. Cette mise à jour offre des améliorations substantielles pour les outils de développement F12, y compris les fonctionnalités et les résolutions de bogues pour l’interface utilisateur de F12, console, DOM Explorateur, débogueur, émulation outil, la réactivité de l’interface utilisateur et outils de profilage de mémoire.

Modifications apportées à l’interface utilisateur de F12

De nouvelles icônes et les notificationsLes icônes de la mémoire et le profileur outils ont changé.

Il existe désormais des indicateurs dans la barre d’icône pour les erreurs dans la Console, la modification de paramètres d’émulation et pour les sessions de profilage actives dans la mémoire, Générateur de profilset d’outils de La réactivité de l’interface utilisateur . L’image suivante montre les nouvelles icônes des notifications sur les icônes d’outil de Console et de la mémoire , qui indique qu’il existe deux erreurs de Console affichées et qu’une session de profilage de mémoire est actuellement en cours :
New interface

Navigation de sur-ensemble F6 dans outilsÀ l’aide de F6 est similaire à l’utilisation de la touche Tab permet de parcourir un outil, mais les éléments « onglets » grâce à un ensemble sélectionné de configuration les plus couramment utilisés dans un volet d’outils et non par le biais de tous les éléments pouvant être sélectionnés. Cela fait partie d’un système global de nettoyage pour l’utilisation du clavier pour naviguer dans et entre les outils.

Aller et venir entre les outils utilisés récemment à l’aide du clavierVous pouvez utiliser Ctrl + [pour revenir en arrière dans votre historique de navigation d’outil et un CTRL +] pour avancer, similaire à la précédente et flèches lorsque vous parcourez.

Accès rapide au mode de documentUne nouvelle liste déroulante est ajoutée en haut de l’interface qui vous permet d’accéder au mode de document à partir de n’importe quel outil, vous n’avez pas besoin de changer d’outils.
Dropdown

Modifications de la console

Console.timeStamp()Lorsqu’elle est appelée à partir de la Console ou dans du code, Console.timeStamp() envoie la sortie vers la Console le numéro de millisecondes de l’onglet du navigateur en cours a été ouverte. Si elle est appelée lors de l’exécution d’une session de profilage avec l’outil de La réactivité de l’interface utilisateur , il crée un utilisateur d’interrogation sur la chronologie de la session ainsi que de la date et l’heure en fonction du temps depuis le démarrage de la session.

CTRL + L efface la console de tous les messages

Saisie semi-automatique préciseLa saisie semi-automatique de la Consolen’inclut plus les propriétés indexeur. Cela entraîne une sélection plus claire et plus précise de suggestions de saisie semi-automatique.

$ $$, _ $x, $0-5$ et $ ont été ajoutés à la liste de saisie semi-automatique de Console pour plus de commodité et pour rendre le comportement de la Consoleplus cohérent avec d’autres navigateurs.

Indicateur de message obsolètesSi vous avez choisi de désactiver l’option Effacer sur Accédez , anciens messages de console ont leur icône grisée pour faire la distinction entre les messages de la page active et les messages à partir de pages précédentes dans l’historique de votre.
Stale message indicator

Modifications de l’Explorateur DOM

Barres de modification dans le volet ComputedLes barres de modification (des couleurs différentes pour les propriétés modifiées, des propriétés ajoutées et propriétés supprimées) que les utilisateurs ont été ceux du volet Styles maintenant s’affichent dans le volet styles Computed .
Change bars in Computed pane

Modifications du débogueur

Source mappe la désignationDroit d’onglet d’un document dans le débogueur, et vous pouvez spécifier un mappage de source. Cela permet d’utiliser des cartes de source avec code livré qui a été la source à mapper le commentaire supprimé.
Sourcemaps designate

Saisie semi-automatique dans les montresMaintenant, lors de l’ajout d’un espion, les options de saisie semi-automatique sont proposées pour vous.
Autocomplete in watches

Inspection de valeur de retourLors de la coupure sur une fonction avec une valeur de retour, l’étape en fonctions jusqu'à ce que vous avez étudié en détail à l’accolade fermante. La valeur de retour s’affichera dans la section variables locales du volet espions . Pas à pas, et la valeur sera renvoyée au code qui a appelé pour lui.

Pour une démonstration rapide, essayez ce code dans la Console:

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

Il appelle la fonction, arrêter dans le débogueur, et vous pouvez avancer pour voir la valeur de retour.

Sélectionner plusieurs points d’arrêtCTRL + clic, MAJ + clic et Ctrl + A peut être utilisé pour sélectionner plusieurs points d’arrêt dans le volet des points d’arrêt .

Continuer et ignorer les sautsAppuyez sur F5 pour continuer du saut suivant. Maintenez la touche F5 pour continuer après plusieurs sauts jusqu'à ce que vous relâchiez F5.

Les points de trace et les points d’arrêt de l’événementOutils de ces travaux similaires aux points d’arrêt et points de trace déjà présente dans la touche F12, mais au lieu d’être déclenchée lorsqu’un bloc de code est exécuté, déclenchées lorsqu’un événement spécifique se déclenche. Chacune possède un filtre conditionnel facultatif pour vous aider à restreindre leur portée à l’instance spécifique d’un événement que vous souhaitez examiner. Ils peuvent être ajoutés à l’aide de la trace d’événement Add et icônes de point d’arrêt de Add événement mis en surbrillance dans l’image suivante :
Event breakpoints and tracepoints

Modifications d’outil de la réactivité de l’interface utilisateur

Importation/exportation des sessions de performanceVous ne devez pas à partager ces données avec un collègue ou à reproduire votre cas de test chaque fois que vous souhaitez analyser les données qu’il génère. L’importation (dossier) et l’exportation (disque) les icônes sur la barre d’icône de l’outil de La réactivité de l’interface utilisateur vous permettent d’enregistrer votre instantanées de la mémoire dans un fichier qui peut être importé ultérieurement.

Aperçu de l’imageSi vous l’avez vu une demande HTTP pour une image et vous êtes-vous demandé de quelle image il était, l’image est maintenant affichée dans les détails de l’événement.
Image preview

Filtrage des événementsLe bouton filtrer les événements est petit mais puissant. Derrière ce bouton est un menu qui vous permet de filtrer les événements de plusieurs façons, et chacune d’elles a un impact significatif :

  • Filtre de nom d’événement : filtre pour n’importe quel nom d’événement contenant une correspondance pour le texte du filtre.

  • Filtre d’activité de l’interface utilisateur : en utilisant les cases à cocher, vous pouvez exclure des grandes catégories d’événements pour le rendre plus facile de se concentrer sur la zone que vous analysiez. Par exemple, si vous êtes uniquement intéressé par l’activité du réseau, vous pouvez filtrer tous les bruits de l’interface utilisateur et l’opération garbage collection.

  • Filtre de seuil de temps : cette fonctionnalité élimine les événements de niveau supérieur inférieur à une milliseconde dans la durée. Dans de nombreux scénarios, cela simplifie considérablement l’affichage de chutes d’eau et vous permet de que vous concentrer sur les événements plus efficaces.
    Time threshold filter

Événements de script HTML5Si vous utilisez des écouteurs de requête de média ou MutationObservers, vous pouvez désormais identifier leurs coûts respectifs lorsque vous exécutez une session de profilage des performances.
HTML5 scripting events

Regroupement de cadreLe bouton entre la liste déroulante Trier par et le menu filtrer les événements permet de regrouper des images. Cela regroupe les événements de niveau supérieur dans leur unité de travail (ou « frame ») correspondant au cours des périodes de temps dans lequel ont été produisent des animations ou des mises à jour de visual. Les images sont traités comme d’autres événements, afin qu’ils peuvent être triées et filtrées et fournissent un Résumé de temps inclusif.
Frame grouping

Mesures de l’utilisateurSi vous utilisez l’API performance.mark() pour ajouter des triangles dans le scénario afin d’indiquer où les événements spécifiques s’est produite, l’API performance.measure() étend l’utilité des marques de performance. Performance.measure() permet de créer un événement de mesure utilisateur englobant le temps entre deux événements de performance.mark() , puis cliquez sur l’événement et puis utiliser l’option de filtre à événements pour sélectionner uniquement les événements entre les deux repères.
User measures

Colorisation de DOMCette fonction ajoute la colorisation pour des éléments DOM, les littéraux de chaîne et les littéraux numériques. Outre ce qui rend le contenu au sein de la touche F12 différents outils apparence et le comportement plus similaires, il ajoute plus attrayante à l’outil de la réactivité de l’interface utilisateur.

Résumé de la sélectionLorsque vous sélectionnez une partie de la barre de planning, le volet de Détails de l’événement affiche un résumé de la sélection. Pointez sur les différents segments du graphique circulaire pour une info-bulle avec la catégorie de l’événement du segment.
Selection summary

Prise en charge de console.timeStamp()À l’aide de la méthode console.timeStamp() dans votre code ou dans la console au cours d’une session de profilage de crée un utilisateur d’interrogation sur la chronologie qui a le temps depuis le début de la session de profilage.

Modifications d’outil de mémoire

DOMINATOR PLIABLEDOMINATOR pliage permet de simplifier le contenu d’une capture instantanée en supprimant des objets dans les vues de niveau supérieur qui sont logiquement les composants d’un autre objet (par exemple, un < BR > dans une balise < DIV >, une portée chez sur une fonction) et ont tendance à être des détails supplémentaires n’améliorent votre vision des données, mais pourraient perdre du temps.

Par exemple, l’image suivante montre les vues avant et après, montrant comment la dominator pliage améliore l’outil « article » dit. Plié affiche 30 < DIV > HTML éléments view, qui compte 15.64 mégaoctets (Mo) de mémoire et sont maintenant à détachement nœuds DOM. Dans de nombreux cas, il n’est pas important de connaître la composition d’un objet, pour autant que cela simplement savoir qu’il est trop volumineux ou qu’il présente une fuite (en particulier lorsque vous utilisez des bibliothèques tierces).
Dominator folding

Colorisation des littéraux de chaîne & numéro de DOMCette fonction ajoute la colorisation pour des éléments DOM, les littéraux de chaîne et les littéraux numériques. Outre ce qui rend le contenu au sein de la touche F12 différents outils apparence et le comportement plus similaires, il rend mémoire analyse plus intéressante.

Cycle de racines de filtrageVous souhaitez être en mesure de rechercher la composition d’un objet sans se perdre sans le savoir un chemin d’accès de la référence circulaire ? Cette fonctionnalité détecte des références enfants circulaires et « « les ajuste afin que vous ne pas dérouter par les parcourir de l’infini. En outre, il annote ces références, afin qu’il soit clair lorsqu’une référence a été « supprimée ».

Session d’importation/exportationVous ne devez pas à partager ces données avec un collègue ou à reproduire votre cas de test chaque fois que vous souhaitez analyser les données qu’il génère. L’importation (dossier) et l’exportation (disque) les icônes sur la barre d’icône de l’outil de la mémoire vous permettent d’enregistrer votre instantanées de la mémoire dans un fichier qui peut être importé ultérieurement.
Import/export session

Modifications d’outil émulation

Réinitialisation et la persistance des paramètresUne icône de paramètres d’émulation de rendre persistant est ajoutée à l’outil d’émulation . Cela permet de conserver vos paramètres d’émulation en cours jusqu'à ce que spécifiquement désactivé. Cela vous permet de travailler, fermez le navigateur et puis revenir à vos paramètres d’émulation intactes. À droite de cette icône est une icône de paramètres d’émulation de rétablir , qui rétablit rapidement de l’outil de valeurs par défaut.
Settings persistence and reset



En outre, cette mise à jour inclut les améliorations suivantes, en fonction des commentaires du canal de développeur Internet Explorer :

  • Ajoute un sélecteur de couleur dans l’Explorateur de modèle DOM qui vous permet de choisir les couleurs à partir de n’importe quelle fenêtre sur votre bureau.

  • Ajoute les piles des appels à partir des appels asynchrones pour les minuteries et les réponses XHR.

Pour plus d’informations sur les outils de développement F12 dans Internet Explorer 11, consultez les sites Web Microsoft suivants :

En utilisant les outils de développement F12

Canal de développeur Internet Explorer

Informations de mise à jour

Cette mise à jour a été pour la première fois dans la mise à jour de sécurité 2976627 :

2976627 MS14-051 : mise à jour de sécurité Cumulative pour Internet Explorer : 12 août 2014,
Remarque Si vous avez installé un aperçu des outils de développeur F12 du canal de développeur Internet Explorer, vous n’avez pas besoin de désinstaller cette version avant d’installer cette mise à jour.

Pour installer la mise à jour de sécurité cumulative la plus récente pour Internet Explorer, accédez à Microsoft Update.

Pour obtenir des informations techniques sur la mise à jour de sécurité cumulative la plus récente pour Internet Explorer, accédez au site web de Microsoft à l'adresse suivante :

http://www.microsoft.com/technet/security/current.aspx

Besoin d’aide ?

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoindre Microsoft Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×