Quoi de neuf dans DevTools ?

En septembre de l'année dernière, j'ai écrit sur certaines des dernières mises à jour de nos DevTools bien-aimés, sur Firefox, Chrome, Safari et Edge. Quatre mois se sont déjà écoulés depuis, et les différentes équipes travaillant sur DevTools n'ont pas chômé ! Au cours de ces quatre mois, ils ont construit beaucoup de nouvelles choses que nous pouvons utiliser. Qu'il s'agisse d' améliorations puissantes de la productivité ou de nouveaux panneaux entiers, ils ont continué à combler l'écart de parité et à innover avec de nouveaux moyens de débogage et d'amélioration de nos expériences Web.

Cela signifie qu'il est grand temps pour une autre mise à jour de DevTools, alors allons-y !

• Chrome
• Bord
• Safari
• Firefox

Chrome

L'équipe Chrome vient de publier un nouveau panneau qui facilite l'enregistrement et la relecture des flux d'utilisateurs : le panneau Enregistreur.

Enregistrer, rejouer et mesurer les flux d'utilisateurs

S'il vous est déjà arrivé de devoir répéter les mêmes étapes de navigation encore et encore dans une application Web afin d'enquêter sur un bogue, cela pourrait changer votre vie !

Mais il y a plus ! Une fois les étapes enregistrées, vous pouvez les rejouer tout en mesurant les performances. De cette façon, vous pouvez travailler sur l'optimisation de votre code, tout en étant sûr de toujours exécuter le même scénario à chaque test.

Vous pouvez en savoir plus sur l'enregistreur ici. Et si vous avez des retours sur cet outil, l'équipe sera ravie de connaître votre avis sur ce problème de chrome.

Naviguer dans l'arborescence d'accessibilité

Le rendu des pages à l'écran n'est pas la seule chose que font les navigateurs. Ils utilisent également l'arborescence DOM qu'ils construisent dans le processus pour créer une autre arborescence : l'arborescence d'accessibilité. L'arborescence d'accessibilité est une autre représentation de la page actuelle qui peut être utilisée par les technologies d'assistance, comme les lecteurs d'écran.

En tant que développeur web, il est très utile d'avoir accès à cet arbre d'accessibilité. Cela aide à comprendre comment le balisage que vous choisissez influence la façon dont les lecteurs d'écran interprètent la page.

Chrome DevTools a un panneau Accessibilité depuis un certain temps dans la barre latérale du panneau Éléments qui contient l'arborescence d'accessibilité. Récemment cependant, l'équipe a expérimenté l'affichage à la fois de l'accessibilité et de l'arborescence DOM au même endroit, permettant aux développeurs d'aller et venir entre les deux.

Pour activer cette expérience, accédez au panneau de la barre latérale Accessibilité et cochez la case "Activer l'arborescence d'accessibilité pleine page". Vous aurez alors un nouveau bouton affiché dans le coin supérieur droit de l'arborescence DOM qui vous permet de basculer entre les arborescences DOM et d'accessibilité.

Pour en savoir plus, cliquez ici et faites part de vos commentaires à l'équipe.

La vue d'ensemble CSS est maintenant activée par défaut

Le panneau de présentation CSS n'est pas nouveau, mais avec autant de panneaux parmi lesquels choisir, vous ne l'avez peut-être jamais utilisé. Cela a été une expérience pendant très longtemps, ce qui signifie que vous deviez accéder aux paramètres de DevTools pour l'activer avant de pouvoir l'utiliser.

Ce n'est plus necessaire. Le panneau CSS Overview n'est plus qu'une fonctionnalité standard maintenant, et vous pouvez l'ouvrir en allant dans … > More tools > CSS Overview .

Si vous ne l'avez jamais utilisé, essayez-le car c'est un outil très utile pour identifier les améliorations CSS potentielles comme les problèmes de contraste ou les déclarations CSS inutilisées.

Pendant que vous êtes dans le menu More tools , jetez un coup d'œil. Chrome DevTools a plus de 30 panneaux individuels ! C'est beaucoup, mais gardez à l'esprit qu'ils sont tous ici pour une raison précise. Certains panneaux peuvent vous aider sur certains aspects de votre application Web. Soyez curieux et si vous n'avez aucune idée de ce que fait une chose, rappelez-vous qu'il existe des documents que vous pouvez lire.

Bord

Alors que l'équipe du navigateur de Microsoft continue d'être un contributeur actif au projet Chromium, elle passe également plus de temps sur des fonctionnalités nouvelles et uniques que seul Edge possède. Passons en revue deux d'entre eux ici.

Déboguer les fuites de mémoire DOM avec le panneau des éléments détachés

Edge vient de lancer un outil d'enquête sur les fuites de mémoire, les outils d'éléments détachés, qui peuvent être très utiles pour enquêter sur les fuites dans les applications de longue durée.

L'une des multiples raisons pour lesquelles les pages Web fuient de la mémoire sont les éléments DOM détachés : des éléments qui auraient pu être nécessaires à un moment donné, mais qui ont été supprimés du DOM et jamais rattachés. Lorsqu'une base de code devient plus complexe, il est plus facile de faire des erreurs et d'oublier de nettoyer ces éléments détachés.

Si vous constatez que votre application continue d'avoir besoin de plus en plus de mémoire au fil du temps, essayez les éléments détachés. Il peut très rapidement vous orienter dans la bonne direction.

En savoir plus à ce sujet sur le blog d'annonce et les documents.

Une toute nouvelle interface utilisateur pour DevTools avec le mode Focus

Nos DevTools n'ont pas changé depuis les premiers jours de Firebug. Bien sûr, l'interface utilisateur a un peu évolué au fil du temps, avec plus d'outils ajoutés et des choses réarrangées, mais à un niveau élevé, c'est toujours la même chose.

L'équipe Edge a mené des expériences et des études d'utilisateurs qui indiquent que DevTools peut être très écrasant (ai-je dit que DevTools avait déjà plus de 30 panneaux ?). Alors que les nouveaux développeurs Web ne savent pas par où commencer et comment explorer et utiliser les outils, les développeurs plus expérimentés ont tendance à se retrouver dans un ou deux flux de travail familiers.

Sur cette base, l'équipe Edge a publié une nouvelle fonctionnalité expérimentale qui facilite l'apprentissage et l'utilisation de DevTools : le Focus Mode .

Focus Mode a une nouvelle barre d'activité, un moyen facile d'ajouter et de supprimer des outils, un tiroir de vue rapide et des menus repensés.

Pour essayer le Focus Mode , activez-le d'abord en allant dans Settings > Experiments > Focus Mode .

Vous pouvez en savoir plus sur le Focus Mode dans ce document explicatif Edge.

Safari

Alors que Safari lui-même se met à jour environ deux fois par an (avec une version majeure à l'automne avec de nouvelles fonctionnalités et une autre au printemps), il est possible d'obtenir des mises à jour plus fréquentes et d'accéder aux premières fonctionnalités en utilisant le canal Safari Technology Preview. Cette version du navigateur se met à jour environ toutes les 2 à 3 semaines.

Vous ne voudrez peut-être pas utiliser le canal Technology Preview pour tous vos tests, car vos clients n'auront probablement que la version standard de Safari installée, mais c'est toujours un navigateur très intéressant à utiliser de temps en temps. Ce faisant, vous aurez accès aux nouvelles fonctionnalités plus tôt et vérifierez ce qui arrivera bientôt sur Safari.

Voici quelques-unes des dernières mises à jour de Safari Web Inspector disponibles dans le canal Technology Preview qui améliorent considérablement le travail avec CSS.

Auto-complétion floue pour CSS dans le panneau Styles

Changer le CSS est l'une des choses que nous faisons le plus dans DevTools, et Safari vient de le rendre beaucoup plus rapide pour nous tous.

Maintenant, leur auto-complétion pour CSS prend en charge la correspondance floue, ce qui signifie que vous pouvez taper des choses comme "pat" pour correspondre à padding-top, ou "bob" pour correspondre à border-bottom.

Si vous utilisez VS Code ou un autre éditeur de texte prenant en charge l'auto-complétion floue, vous vous sentirez comme chez vous.

Regroupement des variables CSS par types dans le panneau calculé

Les variables CSS (également appelées propriétés personnalisées) sont désormais prises en charge sur tous les principaux navigateurs depuis des années, et les propriétaires de sites, les systèmes de conception et les bibliothèques ont vraiment commencé à les utiliser de manière intensive. Pour de bonnes raisons, ils sont géniaux !

Mais avec cette augmentation de l'utilisation, les volets Styles et Calcul de nos Computed commencent à se sentir un peu encombrés.

Safari a publié une fonctionnalité qui aide un peu à cela. Le volet Computed répertorie désormais toutes les variables CSS soigneusement rangées dans une section réductible et regroupées également par types de valeur. Par exemple, toutes les variables de couleur sont regroupées.

Aligner et justifier visuellement les lignes flexibles et les pistes de la grille

Il n'y a pas si longtemps, Chrome et Edge disposaient de très bons éditeurs d'alignement pour les dispositions de flexbox et de grille dans leur panneau Styles . Ils rendent le travail avec des propriétés d'alignement complexes telles que justify-content ou align-items plus visuel, et donc beaucoup plus facile à comprendre.

Safari dispose désormais d'un éditeur visuel similaire pour les propriétés CSS align-content/items/self et justify-content/items/self . C'est très simple à utiliser, il suffit de cliquer sur l'icône à côté d'une valeur d'alignement dans le panneau Styles pour ouvrir l'éditeur. Vous pouvez ensuite choisir le type d'alignement pour vos lignes flexibles et vos pistes de grille.

Firefox

L'équipe Firefox DevTools s'était lancée dans la réarchitecture de la base de code DevTools pendant un certain temps et, bien que cela ait entraîné la livraison de moins de fonctionnalités pendant cette période, ce projet est maintenant terminé. Cela signifie que l'équipe est de retour avec beaucoup d'améliorations vraiment cool.

Choisissez votre contexte d'exécution

Parfois, vous devez gérer plusieurs contextes sur votre site, qu'ils proviennent de plusieurs iframes ou de travailleurs Web. Étant donné que le navigateur exécute ces éléments dans plusieurs processus différents, il n'est pas toujours possible d'y accéder facilement à partir de DevTools.

Pour vous aider dans cette situation, Firefox vient d'ajouter un sélecteur de contexte dans la console que vous pouvez utiliser pour choisir où le code que vous tapez est exécuté. Par exemple, si vous souhaitez connaître la valeur d'une variable globale dans une iframe, vous pouvez utiliser le sélecteur pour passer à l'iframe.

Prise en charge de la fonction hwb() dans l'inspecteur

La fonction de couleur CSS hwb() fait partie de la spécification CSS Color Module 4 et est une méthode très intuitive pour spécifier les couleurs. Les couleurs HWB utilisent 3 valeurs : la première est la teinte, qui est le point de départ de la couleur. Les deuxième et troisième valeurs sont la quantité de blanc et la quantité de noir qui doivent être mélangées pour créer la couleur finale.

La fonction hwb est actuellement prise en charge sur Safari et Firefox, et l'équipe Firefox DevTools vient de publier sa prise en charge dans l'inspecteur. Maintenant, la fonction hwb est reconnue correctement et, en prime, l'incrémentation et la décrémentation des valeurs W et B avec le clavier les maintiennent automatiquement entre 0% et 100% .

Sélectionner les éléments non sélectionnables

Fait intéressant, la sélection d'éléments à partir de DevTools est soumise à la propriété CSS pointer-events . Autrement dit, si un élément est spécifié pour ne recevoir aucun événement de pointeur (avec pointer-events:none ), vous ne pourrez pas le sélectionner à l'aide du sélecteur d'élément dans DevTools, car il nécessite une interaction avec la souris.

Eh bien, dans Chrome et Edge, il existe une astuce spéciale que peu de gens connaissent. Si vous maintenez la Shift enfoncée tout en utilisant le sélecteur d'éléments, même les éléments pointer-events:none deviennent sélectionnables.

La bonne nouvelle est que Firefox vient également d'implémenter la même fonctionnalité. La parité des fonctionnalités entre les différents DevTools est toujours une excellente nouvelle pour les utilisateurs, car elle facilite grandement le test et le débogage des sites Web sur plusieurs navigateurs.

Pendant que nous parlons de parité, il convient également de mentionner que Firefox vient également de fournir un moyen de désactiver les écouteurs d'événements individuels.

Dans le panneau Inspecteur, vous pouvez répertorier les écouteurs d'événements attachés aux éléments en cliquant sur les badges [env] à côté d'eux. Maintenant, la liste des écouteurs d'événements contient également des cases à cocher pour basculer les écouteurs.

Ignorer les lignes de code uniques dans le débogueur

Si vous passez du temps à déboguer JavaScript dans DevTools sur une grande base de code qui utilise des frameworks et des bibliothèques, vous savez peut-être déjà comment ignorer les fichiers source. Cette fonctionnalité vous permet de marquer des fichiers entiers comme ignorés afin que le débogueur y fasse une pause.

Cela signifie que vous pouvez marquer un fichier bundle de framework comme ignoré par exemple, et déboguer joyeusement votre propre code sans craindre d'entrer dans le code du framework.

Alors que d'autres navigateurs prennent également en charge cette fonctionnalité, Firefox innove avec une évolution vraiment cool : la possibilité d'ignorer des plages de lignes dans un fichier ! Imaginez, vous avez une fonction utilitaire dans un fichier qui est appelé tout le temps. Il peut être utile de marquer uniquement cette fonction comme ignorée et de pouvoir toujours déboguer tout le reste de ce fichier normalement. Cela peut également être utile lors de l'utilisation d'un bundler qui regroupe l'ensemble de votre code source et de vos bibliothèques dans le même fichier.

Cette fonctionnalité est, au moment de la rédaction, encore expérimentale. Vous devrez d'abord définir le devtools.debugger.features.blackbox-lines sur true sur la page about:config .

Une fois activé, vous pouvez cliquer avec le bouton droit sur n'importe quelle ligne de votre code source et choisir Ignore line .

C'est tout pour le moment!

J'espère que vous avez apprécié ces mises à jour et qu'elles se révéleront utiles lors du développement Web. Comme toujours, si vous avez des commentaires, des bugs à signaler ou de nouvelles idées de fonctionnalités pour DevTools, faites-vous entendre ! Il est impressionnant de voir à quel point les capacités de débogage de la plate-forme Web ont évolué, et nous pouvons tous contribuer à l'améliorer !