Quoi de neuf dans Chrome, Edge, Safari et Firefox ? Patrick Brosset le détaille avec les dernières fonctionnalités de DevTools sur tous les navigateurs.
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. Des puissantes améliorations de la productivité aux 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
L'équipe Chrome vient de publier un nouveau panneau qui permet d'enregistrer et de rejouer très facilement les flux d'utilisateurs : le panneau Enregistreur.
Enregistrer, relire et mesurer les flux d'utilisateurs[19659007]Si vous avez déjà dû 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 !
Panneau d'enregistrement Devtools
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 à l'optimisation de votre code, tout en étant sûr de toujours exécuter le même scénario à chaque test.
Le rendu des pages à l'écran n'est pas le seul chose que font les navigateurs. Ils utilisent également l'arborescence DOM qu'ils construisent au cours du processus pour créer une autre arborescence : l'arbre d'accessibilité. L'arborescence d'accessibilité est une autre représentation de la page en cours 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 à cette arborescence d'accessibilité. Cela aide à comprendre comment le balisage que vous choisissez influence la façon dont les lecteurs d'écran interprètent la page. 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 l'« 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é. commentaires.
La présentation CSS est maintenant activée par défaut
Le panneau Vue d'ensemble CSS n'est pas nouveau, mais avec tant de panneaux parmi lesquels choisir, vous ne l'avez peut-être jamais utilisé . C'est une expérience depuis très longtemps, ce qui signifie que vous deviez vous rendre dans les paramètres de DevTools pour l'activer avant de pouvoir l'utiliser.
Ce n'est plus nécessaire. Le panneau de présentation CSS n'est désormais qu'une fonctionnalité standard, et vous pouvez l'ouvrir en accédant à … > Plus d'outils > Présentation CSS.
Si vous ne l'avez jamais utilisé, essayez-le car il 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 Plus d'outilsjetez 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 y a docs que vous pouvez lire.
Plus après le saut ! Continuez à lire ci-dessous ↓
Edge
Bien que l'équipe des navigateurs de Microsoft continue de contribuer activement au projet Chromium, elle passe également plus de temps sur de nouveaux et des fonctionnalités 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 des é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 la mémoire est des é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 à avoir besoin de plus en plus de mémoire au fil du temps, donnez aux éléments essayer. Il peut très rapidement vous orienter dans la bonne direction.
Une toute nouvelle interface utilisateur pour DevTools avec le mode Focus
Nos DevTools ont regardé le comme ils le font 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éorganisé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 ?). Bien que les nouveaux développeurs Web ne sachent 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 : 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 Mode de mise au pointactivez-le d'abord en accédant à Paramètres > Expériences > Mode de mise au point.
Bien que Safari lui-même sorte chaque année avec des mises à jour iOS et macOS, il est possible d'obtenir des mises à jour plus fréquentes et d'accéder à des fonctionnalités en utilisant la chaîne d'aperçu de la technologie Safari.
Cette version de la Le navigateur se met à jour environ toutes les 6 à 7 semaines, de la même manière que les autres navigateurs.
Vous ne voudrez peut-être pas utiliser le canal Technology Preview pour tous vos tests, car vos clients n'auront probablement que la version Safari standard installée, mais ça reste 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 dans 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
La modification du 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- l'achèvement 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 qui prend en charge l'achèvement, vous vous sentirez comme chez vous.
Regroupement des variables CSS par types dans le panneau calculé
Les variables CSS (alias 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é à en faire un usage intensif. Pour de bonnes raisons, ils sont géniaux !
Mais avec cette augmentation de l'utilisation, les volets Styles et Calculé de nos DevTools commencent à sembler un peu encombrés.
Safari a publié une fonctionnalité qui aide un peu à cela. Le volet Calculé 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 grille
Il n'y a pas si longtemps, Chrome et Edge disposaient de très bons éditeurs d'alignement pour les mises en page flexibles 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 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. moins de fonctionnalités expédiées pendant cette période, ce projet est maintenant terminé. Cela signifie que l'équipe est de retour avec de nombreuses améliorations vraiment intéressantes.
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 remédier à 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 type 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 Inspector
La fonction de couleur hwb() CSS 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 Firefox DevTools L'équipe vient de publier un support pour cela 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 maintient automatiquement entre 0 % et 100 %.
Sélectionner des éléments non sélectionnables
Il est intéressant de noter que 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 la souris interaction.
Eh bien, dans Chrome et Edge, il existe une astuce spéciale que peu de gens connaissent. Si vous maintenez la touche 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 d'implémenter la même fonctionnalité que bien. La parité des fonctionnalités entre différents DevTools est toujours une excellente nouvelle pour les utilisateurs, car elle facilite considérablement le test et le débogage des sites Web sur plusieurs navigateurs. pour désactiver également 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 [env] badges à côté d'eux. Désormais, 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 de bundle de framework comme ignoré par exemple, et déboguer joyeusement votre propre code sans craindre d'entrer dans le code du framework.[19659003]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 s'avérer utile lors de l'utilisation d'un groupeur 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 booléen 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 choisissez Ignorer la ligne.
C'est tout pour l'instant !
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 ! C'est impressionnant de voir le chemin parcouru par les capacités de débogage de la plate-forme Web, et nous pouvons tous contribuer à l'améliorer !
</span>
</div>
</p></div>
</pre>
<p><div class=](https://i0.wp.com/www.smashingmagazine.com/images/logo/logo--red.png?resize=35%2C46&ssl=1){kind=logo}