Share
Avertissement: Je travaille pour Microsoft Corporation.
En janvier, je vous ai présenté les fonctionnalités des outils de développement F12 d'Internet Explorer 10. La récente version de Microsoft Windows 8.1 Preview par Microsoft apporte non seulement une mise à jour d'Internet Explorer (désormais en version 11), mais également une actualisation bienvenue des outils de développement F12. Ce dernier point est particulièrement important, car les développeurs en dépendent pour résoudre les problèmes liés au site dans IE. Jusqu'à présent, les outils ont résolu la plupart des cas d'utilisation du débogage, mais il est clair que, à mesure que les sites deviennent plus complexes, les développeurs ont besoin d'outils plus riches. Cette mise à jour vise à apporter un nouveau look et des fonctionnalités étendues aux développeurs, en mettant l'accent sur les éléments suivants:
Certaines des mises à jour sont simplement des fonctionnalités pratiques destinées à rationaliser le flux de travail des développeurs (par exemple, des chapelures d’éléments), tandis que d’autres auront un impact considérable sur l’amélioration des performances et du rendu des applications Web..
Dans cet article, nous allons passer en revue certaines des dernières mises à jour et fonctionnalités des outils de développement IE11 F12 et, dans certains cas, je vous montrerai les différences claires entre les fonctionnalités des versions précédentes..
Depuis sa création, les outils F12 ont conservé une interface utilisateur relativement cohérente à l’aide de menus déroulants et d’une métaphore à base d’onglet pour présenter les différentes options disponibles. Cependant, certaines choses qui semblaient toujours gêner la progression de la tâche, telles que les outils apparaissant dans leur propre fenêtre lors d’une session de débogage et les onglets prenant de précieuses propriétés verticales. Avec IE11, les outils F12 ont été considérablement repensés pour rendre l'interface utilisateur plus intuitive en exploitant un système de navigation basé sur des graphiques positionné en tant que ruban de défilement dans la partie gauche du volet débogueur:
Les menus utilisés pour aligner le haut des outils ont été supprimés afin de fournir une plus grande clarté à l'interface de débogage, ainsi que de libérer de l'espace pour travailler. En outre, la conception du débogueur lui-même a été considérablement actualisée, passant d’une interface utilisateur de type Windows 7 à une apparence plus moderne de Windows 8. Vous pouvez voir la différence majeure ci-dessous:
La nouvelle interface utilisateur est clairement plus cohérente avec les éléments modernes introduits dans Windows 8..
Bien que l'outil d'inspecteur DOM d'origine fournisse une expérience décente, il manquait certaines fonctionnalités clés. Les principaux points douloureux pour moi ont été l'absence de mise à jour réelle du DOM, l'ordre d'affichage des styles CSS et l'incapacité de voir les événements liés aux éléments DOM. Heureusement, ceux-ci ont maintenant été abordés dans cette mise à jour.
Étant donné que je me concentrais beaucoup sur JavaScript, la recherche d’événements attachés était particulièrement frustrante, car elle nécessitait beaucoup de code de débogage basé sur la console et d’essais et erreurs pour définir le combo appelé événement / méthode. En regardant la capture d'écran ci-dessous, vous pouvez voir comment je peux cliquer sur un élément spécifique, voir l'événement qui lui est associé et la méthode qui sera appelée lors du déclenchement de l'événement. C'est un gain de temps considérable du point de vue du débogage.
Et bien que cela puisse sembler évident, un léger mais important changement dans la manière dont les outils affichent le CSS appliqué à un élément vient de rendre les choses beaucoup plus faciles. Avant cette mise à jour, les outils F12 affichaient les styles hérités, ce qui vous obligeait à faire défiler la fenêtre des styles pour accéder au style réellement utilisé pour l'élément..
L'équipe a mis à jour l'affichage afin que les styles les plus récents soient affichés en premier, ce qui, à mon avis, est beaucoup plus logique, en particulier du point de vue du débogage:
Voici d’autres nouvelles fonctionnalités intéressantes:
Auparavant, vous deviez ouvrir les outils F12, cliquer sur la flèche de l'inspecteur DOM, puis sur un élément. Cela simplifie un peu les choses et amène cette expérience au niveau des autres outils de débogage..
Le fil d'Ariane fournit un moyen intuitif de passer en revue la structure hiérarchique d'un élément DOM, vous permettant de cliquer facilement sur n'importe quelle partie du fil d'Ariane pour extraire l'élément parent individuel:
Avec la nouvelle fonctionnalité de style Intellisense, lorsque vous modifiez un style ou ajoutez une nouvelle règle, vous obtenez immédiatement un menu contextuel qui vous offre un accès rapide aux règles et valeurs CSS. Certains d’entre vous sont peut-être des encyclopédies CSS, mais j’apprécie de ne pas avoir à les retenir toutes. :)
Enfin, avec DnD dans l'explorateur DOM, vous pouvez tester de manière interactive l'aspect et la réactivité de vos éléments lorsque vous modifiez leur position dans la mise en page. Les modifications sont effectuées en direct, vous recevez donc un retour immédiat lorsque vous repositionnez votre élément..
Il y a BEAUCOUP plus de code placé du côté client que jamais auparavant. Des structures telles que Ember.js et Angular facilitent considérablement la tâche des développeurs pour la création d'applications Web d'une page. Les développeurs tirent parti des fonctionnalités de HTML5 pour créer des jeux immersifs nécessitant des taux de réponse et des taux de trame élevés. Cela entraîne de nouvelles considérations sur les performances des pages et les nouveaux outils F12 offrent un nouvel outil pour vous aider à profiler et à mesurer la réactivité de votre interface utilisateur. L'outil de réactivité de l'interface utilisateur est un profileur qui vous permet de mesurer l'utilisation de la mémoire et du processeur afin de détecter tout problème de performances de l'interface utilisateur..
En lançant le profileur, je peux suivre la réaction de mon processeur à ma page et connaître le débit visuel (images par seconde AKA) à différents moments du cycle de chargement de la page..
Le panneau Détails de la chronologie m'offre des détails encore plus précis sur la manière dont des événements spécifiques ou des requêtes réseau ont affecté les performances de la page, ce qui m'a permis d'approfondir tous les problèmes et d'apporter des modifications pour améliorer les performances de mon site..
En examinant chaque élément du scénario, vous pouvez voir comment des actions spécifiques, par exemple le style, peuvent affecter les performances de rendu..
Vous pouvez imaginer à quel point ces données sont précieuses, en particulier pour les développeurs de jeux qui souhaitent exploiter les fonctionnalités de navigateur natif pour les jeux et sont habitués à disposer d'outils de débogage robustes dans d'autres outils de développement basés sur des plugins, tels que Flash..
Parmi tous les changements, les plus importants pour moi ont été ceux du débogueur de script, principalement parce qu’ils ont permis d’éviter la rage que je ressentais lorsque je l’utilisais. Il s’agissait principalement d’un problème d’UX car au moment où vous avez choisi d’exécuter le débogueur, l’ensemble du panneau des outils s’affichait dans la fenêtre du navigateur et dans sa propre fenêtre contextuelle autonome. C'était pour le moins une expérience bouleversante. Cette mise à jour résout le problème et garantit que le débogueur reste fermement en place..
Une autre grande amélioration est l'utilisation d'une métaphore d'onglets pour afficher chaque fichier ouvert que vous déboguez. La version précédente de l'outil vous obligeait à rouvrir chaque fichier que vous deviez déboguer. La nouvelle version affiche un onglet pour chaque fichier sur lequel vous travaillez, ce qui facilite considérablement la navigation..
De plus, les options généralement enterrées dans les menus contextuels sont maintenant bien mises en évidence et facilement identifiables. C’est étonnant de constater combien de fois les développeurs ont été surpris quand je leur ai montré la jolie fonction d’impression permettant de formater JavaScript, même si elle existait depuis IE8. La fonctionnalité est maintenant mise en surbrillance via une icône située en haut du volet de débogage, à côté de l'icône wordwrap..
Last but not least, oubliez console.log (). Les nouveaux outils prennent désormais en charge facilement Tracepoints, ce qui vous permet de surveiller des valeurs spécifiques de la même manière que vous le feriez via console.log ().
Piger les problèmes de mémoire a toujours été un problème, surtout s’il s’agit d’un problème de dégradation lente de la mémoire. Les nouveaux outils F12 visent à résoudre ce problème avec son nouveau profileur de mémoire. L'outil vous permet de prendre des instantanés de l'utilisation de la mémoire de votre site ou de votre application sur une période donnée, vous permettant ainsi de déterminer les actions ou les zones de votre application susceptibles d'être à l'origine du problème..
En créant un instantané de base de votre empreinte mémoire suivi des instantanés suivants, vous pouvez comparer les données collectées pour déterminer le nombre d'objets actifs et les types d'objets persistants. Cela inclut les éléments HTML, les nœuds DOM et les objets JavaScript. Vous pouvez explorer les comparaisons des instantanés pour voir le changement de mémoire entre eux pour des objets individuels..
Vous êtes probablement trop familier avec les listes déroulantes complexes appelées "Mode navigateur" et "Mode document". Ils étaient conçus pour aider les développeurs à résoudre les problèmes liés aux versions non modernes d'Internet Explorer. En réalité, ils étaient un peu déroutants à utiliser et n'offraient qu'un support de test marginal pour les EI non modernes. Avec cette nouvelle mise à jour, les outils F12 ont simplifié cette opération pour aider les développeurs à concentrer leurs tests sur la version d'Internet Explorer la plus conforme aux normes, en particulier si leur site est en cours d'exécution en mode de compatibilité..
En modifiant le mode de document en "Edge", un développeur peut forcer son site à effectuer le rendu dans le mode de normes le plus récent pris en charge par cette version d'Internet Explorer et s'efforcer d'apporter les modifications requises par les normes pour que son site s'affiche dans plusieurs navigateurs. En outre, un lien informatif est fourni directement dans l'outil qui emmène directement les développeurs vers modern.IE, une ressource en ligne offrant un scanner pour les problèmes de compatibilité courants, des machines virtuelles pour les différentes versions d'Internet Explorer et des meilleures pratiques pour garantir la sécurité des sites. compatibilité dans les versions modernes d'IE.
Une nouvelle fonctionnalité qui cible explicitement les appareils mobiles et les tablettes est la simulation de géolocalisation. Cela vous permet de tirer parti de l'API de géolocalisation même si votre appareil n'est pas connecté..
Il s’agit d’une excellente mise à jour d’une suite d’outils qui nous ont bien servis, mais qui ont définitivement besoin d’être améliorés. L'accent a été clairement mis sur la fourniture d'outils qui vous aident à résoudre les problèmes liés aux performances, ce qui est extrêmement important, en particulier pour les tendances orientées vers les applications d'une page, de style natif..
.
Accentsconagua