Nouveautés des outils F12 avec la Mise à jour Windows 8.1

Nous sommes heureux d'annoncer un ensemble de mises à jour significatives des outils de développement dans Internet Explorer (F12), ainsi que dans Visual Studio 2013 Update 2. Les mises à jour des outils F12 accompagnent les nouvelles versions dans Internet Explorer 11.

Précédemment, nous avons décrit les fonctionnalités des outils F12, où l'accent est mis sur un workflow itératif et rapide permettant de fournir des données précises dans l'Explorateur DOM ainsi que des données exploitables dans les outils de mémoire et de performance.

Voici les améliorations que cette mise à jour des outils F12 comporte :

• un workflow itératif plus tendu avec un suivi des modifications dans les outils CSS ;
• la possibilité de déboguer dans le code que vous avez écrit tel que CoffeeScript ou TypeScript, avec la prise en charge de mappages de sources, et de déboguer « uniquement mon code » si vous utilisez des bibliothèques d'autres développeurs ;
• des outils de capture instantanée JS améliorés ainsi qu'un meilleur filtrage qui vous permettent de trouver plus rapidement des solutions, par exemple en cas de fuites de mémoire.

Observons maintenant comment se traduisent ces améliorations dans les outils F12.

Suivi des modifications dans CSS avec les barres de modification

Les outils F12 vous permettent de modifier l'apparence d'un site Web directement dans le navigateur, sans que vous ayez besoin de notre code source, ce qui constitue l'un de leurs atouts majeurs. Toutefois, si vous passez du temps à effectuer des modifications, il est difficile de les suivre toutes dans votre CSS, puis de reporter leur version finale dans vos sources d'origine. Pour améliorer cette situation, nous avons introduit une fonctionnalité d'enregistrement et de suivi des modifications, à la fois visuellement avec les barres de modification et par l'intermédiaire du nouveau panneau CSS « Modifications » dans l'Explorateur DOM.

Les modifications que vous apportez aux propriétés et règles CSS dans le volet Styles de l'Explorateur DOM seront repérées par un indice visuel dans la marge gauche, à côté de la propriété ou de la règle modifiée. Il s'agit de « barres de modification » : elles sont vertes pour les nouvelles propriétés, jaunes pour les propriétés et les valeurs modifiées et rouges pour les propriétés supprimées. Ces barres de modification seront conservées, même si vous commencez à regarder d'autres nœuds DOM.

Barres de modification sous l'onglet Styles

Comme vous pouvez être amené à effectuer plusieurs modifications dans différents nœuds, nous avons ajouté un onglet dans le panneau CSS qui répertorie toutes les modifications dans la session F12 en cours. Il s'apparente à une vue « diff » qui peut vous servir de liste de vérification lorsque vous apportez des modifications manuelles à votre code source. Il prend également en charge la fonctionnalité de copie et d'annulation des changements via un menu contextuel.

Nouvel onglet Modifications

Débogage de votre application avec « Uniquement mon code »

Si vous développez des sites et des applications Web, vous utilisez probablement des bibliothèques tierces telles que jQuery ou Angular, qui sont bien souvent minifiées. Nous rencontrons souvent des développeurs qui, lors du débogage, entrent dans la bibliothèque de code et se perdent dans ce labyrinthe, avant de pouvoir revenir à leur code pour le déboguer.

Depuis un certain temps, Visual Studio prend en charge une fonctionnalité de langages managés « Uniquement mon code » (JMC, Just My Code) et dans Visual Studio 2012, cette fonctionnalité est également activée pour JavaScript. Le principe de « Uniquement mon code » est de conserver le débogueur dans votre code, c'est-à-dire dans le code que vous voulez déboguer et non dans le code que vous ne pouvez pas vraiment modifier.

Cette fonctionnalité étant désormais incluse dans les outils F12, vous constaterez ce qui suit pendant le débogage :

• vous n'entrerez jamais dans un fichier (bibliothèque) marqué en tant que code de bibliothèque ; vous pouvez identifier une bibliothèque via le sélecteur de fichiers dans le débogueur (voir ci-dessous), même si vous n'êtes pas entré dans le fichier. Une fois identifiée, toute étape vous mènera directement à votre code.
• Si vous activez « Arrêter sur toutes les exceptions », vous ne serez jamais arrêté sur une exception levée et gérée dans le code de bibliothèque.

Identification de fichiers en tant que code de bibliothèque

Par défaut, les outils F12 associeront à du code de bibliothèque les fichiers avec une URL *.min.js. Toutefois, vous pouvez facilement modifier ce comportement en identifiant les bibliothèques dans le sélecteur de fichiers du débogueur ou dans le menu contextuel de l'onglet Fichier, si le fichier est ouvert dans le débogueur.

Nous aborderons plus en détail cette fonctionnalité et le workflow dans un prochain billet.

Débogage de votre application écrite dans d'autres langages à l'aide des mappages de sources (v3)

Les applications JavaScript devenant de plus en plus complexes, la tendance veut que la création de code se fasse dans un autre langage, qui est ensuite compilé en JavaScript (par exemple, les outils F12 sont écrits en TypeScript et compilés en JavaScript). De la même façon, vous avez peut-être minifié du code JavaScript autre que le code source initial dans lequel vous avez écrit l'application. Ce processus de compilation signifie que le code JavaScript, en cours d'exécution dans le navigateur et en cours de débogage, n'est pas le code présent dans votre éditeur, ce qui rend le débogage plus délicat.

Pour résoudre ce problème, il existe un format communautaire qui présente de plus en plus d'intérêt pour les navigateurs et Visual Studio, car il mappe le code source initial et les fichiers compilés. Il est connu sous le nom de « Mappages de sources » (spécification). Ces mappages sont générés pendant la compilation et cette version des outils F12 inclut désormais la prise en charge de la version 3 de la spécification des mappages de sources.

Quand un fichier JavaScript compilé définit un mappage de source valide, les outils F12 chargent par défaut le fichier source initial à la place du fichier JS en cours d'exécution, lorsque les « mappages de sources » sont activés (bouton sur le débogueur). Vous disposerez des fonctionnalités suivantes :

• Les fichiers dans le sélecteur de fichiers utilisent leur nom source initial, plutôt que celui des documents en cours d'exécution.
• Le ou les fichiers que vous ouvrez dans le débogueur, et qui vous servent à parcourir votre code sont vos fichiers sources d'origine. Pour TypeScript, CoffeeScript et Script #, ces fichiers seront colorisés de manière appropriée (comme vous pouvez le voir avec le fichier TypeScript ci-dessous).

Comme avec « Uniquement mon code », nous aborderons plus en détail les mappages de sources dans un prochain billet.

Trois différentes captures instantanées

En déboguant une fuite de mémoire, une grande quantité de données créée par le profileur de mémoire vous est généralement présentée (même après filtrage), ce qui complique la détection de la fuite. Dans les outils F12, nous avions déjà fait en sorte que les outils résument l'état de l'application dans les vignettes de captures instantanées, et suggèrent de façon opportune les problèmes potentiels au moyen des indicateurs d'information DOM détachés. Cependant, dans cette mise à jour, nous voulions franchir une nouvelle étape en aidant les développeurs à atteindre plus facilement le niveau « zéro problème ».

L'outil de mémoire F12 comprend désormais la faculté de comparer trois captures instantanées (et d'obtenir une vue globale de ces trois captures instantanées). Il est plus facile de déterminer une fuite avec un processus de ce type. Les captures instantanées représentent les situations suivantes :

• L'état initial de votre application avant que nous ne démarriez le scénario qui fournit la base des objets de votre application.
• L'état une fois votre scénario terminé, et éventuellement après l'augmentation de la base de votre application, ce qui justifie une capture instantanée après réexécution du scénario.
• L'état de « retour à la normale » de votre application, une fois que vous avez réessayé le scénario. Dans cet état, tous les objets de votre scénario devront avoir été libérés (ou vous vous attendez à ce qu'ils soient actifs).

Avec ces captures instantanées, vous pouvez comparer ces états. Par exemple, vous pouvez utiliser le nouveau filtre « Étendue » pour sélectionner les « objets restants dans la capture instantanée n°2 » (ce qui représente l'état à la fin de votre scénario). Potentiellement, ils constituent un ensemble d'objets qui ne devraient plus se trouver là désormais, comme affiché ci-dessous.

Filtre Étendue

La vue des types que vous apercevez ci-dessus montre une liste d'objets, avec éventuellement un indicateur dans la marge des objets susceptibles de présenter des problèmes.

Outil pour Internet Explorer sur Windows Phone dans Visual Studio 2013 Update 2

Si vous avez consacré du temps à essayer de produire une version mobile convaincante de votre site Web, vous avez certainement été confronté à des problèmes d'apparence ou de fonctionnement sur les navigateurs mobiles.  Pour résoudre ces difficultés sur Windows Phone, nous sommes heureux d'annoncer que nous avons activé, dans Visual Studio 2013 Update 2, l'utilisation des outils de débogage et de performance de Visual Studio pour Internet Explorer sur Windows Phone 8.1. Pour plus d'informations sur ce sujet, consultez le Blog Visual Studio ALM .

De nombreuses autres améliorations…

Dans cette version des outils F12, nous avons essayé de répondre aux nombreuses demandes des clients. Nous avons également tenté de corriger les bogues liés à plusieurs blocages entraînés par l'inspecteur de réseau et par le non-respect des commentaires conditionnels lors de l'utilisation des outils F12 pour émuler des modes de document inférieurs. Plutôt que de dresser la liste des bogues ici, ils seront mis à jour sur le site Microsoft Connect pour Internet Explorer (https://connect.microsoft.com/IE/Feedback).

Voici une liste plus détaillée des modifications de cette version des outils F12.

Shell

• Ctrl+[ et ctrl+] pour passer d'un outil à l'autre

Console

• Liste déroulante pour énumérer les cibles d'exécution
• Inspection des objets qui sont enregistrés via console.log, notamment le format de style printf
• Paramètres locaux (au point d'arrêt) dans IntelliSense pour la console
• Raccourci $_ de console pour accéder au résultat de la dernière évaluation dans la console
• Enregistrement systématique des messages de console, avant le lancement des outils F12 (via Options Internet -> Avancé -> (activer) Toujours enregistrer les messages de console de développeur)

Débogueur

• Persistance des points d'arrêt, des espions et des onglets, entre autres, afin de ne pas perdre votre état
• Débogage de votre Typescript/code compilé dans les outils F12 à l'aide des mappages de sources
• Débogage avec « Uniquement mon code » et sans se préoccuper du code de bibliothèque (JMC, Just My Code)
• Code d'évaluation de nom via le commentaire //#sourceUrl=<url>
• Raccourci clavier pour annuler ou actualiser une page non fonctionnelle via ctrl+maj+f5
• Noms de fonction complets (par exemple, a.b.c) dans des vues de piles d'appels et du profileur

Explorateur DOM

• Pseudo-états CSS : définissez le pseudo-état d'un élément afin de tester vos pseudo-styles.
• Barres de modification CSS : affichez les valeurs modifiées dans la vue des styles.
• Vue Modifications CSS : affichez les modifications CSS finales qui ont été appliquées et copiez-les dans le Presse-papiers.
• Panneau combiné des styles calculés : affichez les styles CSS dans un volet qui centralise les ajouts, les modifications et les liens vers la source.
• Ctrl+b dans l'Explorateur DOM pour sélectionner un élément.

Émulation

• Mode du document : sachez pourquoi cette page est dans un certain mode de document afin de mieux comprendre vos scénarios de compatibilité.

Réactivité de l'interface utilisateur

• Tri sur la durée de tous les niveaux d'événements dans la vue détaillée de la chronologie
• Simplification de la vue détaillée de la chronologie en éliminant de la sélection des événements appartenant à certaines catégories (per exemple, le catalogue global, le décodage d'image)
• Facilité de zoom dans les vues de graphiques et de détails sur la durée d'une instance d'événement précise (via un menu contextuel)
• Identification de la propriété exacte qui a été modifiée (et de la nouvelle valeur) lorsque les styles inclus d'un élément DOM sont modifiés par programme

Mémoire

• Identification de la ligne de code responsable d'allouer une fonction spécifique, afin de pouvoir établir une corrélation entre la mémoire et la source
• Élément de menu contextuel visant à montrer un objet dans la vue des dominateurs (et la taille retenue, etc.)
• Mises à jour des vues de types visant à montrer le ou les types qui ont été le plus modifiés dans une version « diff », afin de rationaliser plus facilement l'évolution du code
• Quadrillage sur l'interface utilisateur d'un tableau
• Interface utilisateur des paramètres (affichage d'éléments intégrés, de références circulaires et d'id d'objet)

Résumé

Avec cette mise à jour d'Internet Explorer 11 et des outils F12, nous mettons plus souvent à jour les outils de développement afin de vous faire profiter, aussi vite que possible, des dernières fonctionnalités et corrections de bogues. Attendez-vous à ce que nous communiquions davantage et si vous souhaitez nous faire parvenir des commentaires ou nous demander des nouvelles fonctionnalités ou de l'aide, contactez-nous simplement sur Twitter @IEDevChat, via l'outil d'envoi de commentaires d'IE11 ou par le biais de Connect.

Ce billet évoque uniquement une petite partie des nouveautés des outils F12. Au cours des prochaines semaines, nous allons publier des billets plus détaillés sur les outils F12 et la façon de les utiliser. Vous pouvez également consulter la documentation complète relative aux outils de développement F12 sur MSDN.

En attendant, n'hésitez pas à nous faire part de vos commentaires. Vous pouvez contacter l'équipe sur Twitter @IEDevChat, via l'outil d'envoi de commentaires d'IE11 ou par le biais de Connect.

— Andy Sterland, chef de projet, Outils F12

— Jonathan Carter, chef de projet, Outils F12

— Simon Calvert, chef de projet, Outils F12