Nouveautés de DevTools : édition multi-navigateurs

Les outils de développement de navigateur continuent d'évoluer, avec des fonctionnalités nouvelles et améliorées ajoutées en permanence. Il est difficile de garder une trace, surtout lorsque vous utilisez plus d'un navigateur. Avec autant d'offres, il n'est pas surprenant que nous nous sentions dépassés et que nous utilisions les fonctionnalités que nous connaissons déjà au lieu de suivre les nouveautés.

C'est dommage cependant, car certains d'entre eux peuvent nous rendre beaucoup plus productifs.

Donc, mon objectif avec cet article est de sensibiliser à certaines des dernières fonctionnalités de Chrome, Microsoft Edge, Firefox et Safari. J'espère que cela vous donnera envie de les essayer et vous aidera peut-être à vous sentir plus à l'aise la prochaine fois que vous aurez besoin de déboguer un problème spécifique au navigateur.

Cela dit, allons-y.

Outils de développement Chrome

L'équipe Chrome DevTools a travaillé dur pour moderniser sa base de code (qui a maintenant 13 ans). Ils ont été occupés à améliorer le système de construction, à migrer vers TypeScript, à introduire de nouveaux WebComponents, à reconstruire leur infrastructure de thème, et bien plus encore. En conséquence, les outils sont désormais plus faciles à étendre et à modifier.

Mais en plus de ce travail moins orienté vers l'utilisateur, l'équipe a également fourni de nombreuses fonctionnalités. Permettez-moi de passer en revue quelques-uns d'entre eux ici, liés au débogage CSS.

Accrochage au défilement

L'accrochage au défilement CSS offre aux développeurs Web un moyen de contrôler la position à laquelle un conteneur défilant arrête de défiler. C'est une fonctionnalité utile pour, par exemple, de longues listes de photos où vous voulez que le navigateur positionne chaque photo proprement dans son conteneur déroulant automatiquement pour vous.

Si vous voulez en savoir plus sur l'accrochage au défilement, vous pouvez lire cette documentation MDN et jeter un œil aux démos d'Adam Argyle ici.

Les principales propriétés de l'accrochage au défilement sont :

• scroll-snap-type , qui indique au navigateur la direction dans laquelle l'accrochage se produit et comment cela se produit ;
• scroll-snap-align , qui indique au navigateur où s'accrocher.

Chrome DevTools a introduit de nouvelles fonctionnalités qui aident à déboguer ces propriétés clés :

• si un élément définit scroll-snapping en utilisant scroll-snap-type , le panneau Elements affiche un badge à côté de lui.

• Vous pouvez cliquer sur le badge scroll-snap pour activer une nouvelle superposition. Lorsque vous le faites, plusieurs éléments sont mis en évidence sur la page :
  • le conteneur de défilement,
  • les éléments qui défilent dans le conteneur,
  • la position où les éléments sont alignés (marqué par un point bleu).

Cette superposition permet de comprendre facilement si et comment les choses se mettent en place après le défilement. Cela peut être très utile lorsque, par exemple, vos éléments n'ont pas d'arrière-plan et que les limites entre eux sont difficiles à voir.

Bien que l'accrochage au défilement ne soit pas une nouvelle fonctionnalité CSS, son adoption est plutôt faible (moins de 4 % selon chromestatus.com), et depuis que la spécification a changé, tous les navigateurs ne le prennent pas en charge de la même manière.

J'espère que cette fonctionnalité de DevTools incitera les gens à jouer davantage avec et finalement à l'adopter pour leurs sites.

Requêtes de conteneur

Si vous avez réalisé n'importe quel type de développement Web au cours des dernières années, vous avez probablement entendu parler des requêtes de conteneur. C'est l'une des fonctionnalités CSS les plus demandées depuis très longtemps et c'est un problème très complexe à résoudre pour les fabricants de navigateurs et les rédacteurs de spécifications.

Si vous ne savez pas ce que sont les requêtes de conteneur, je vous suggère de lire d'abord l'article Primer On CSS Container Queries de Stephanie Eckles.

En quelques mots, ils permettent aux développeurs de définir la disposition et le style des éléments en fonction de la taille de leur conteneur. Cette capacité est un énorme avantage lors de la création de composants réutilisables, car nous pouvons les adapter à l'endroit où ils sont utilisés (plutôt que de s'adapter uniquement à la taille de la fenêtre d'affichage pour laquelle les requêtes multimédias sont bonnes).

Heureusement, les choses bougent dans cet espace et Chromium prend désormais en charge les requêtes de conteneur et l'équipe Chrome DevTools a commencé à ajouter des outils qui facilitent la prise en main.

Les requêtes de conteneur ne sont pas encore activées par défaut dans Chromium (pour les activer, accédez à chrome://flags et recherchez "requêtes de conteneur"), et cela peut encore prendre un peu de temps pour qu'elles le soient. De plus, le travail de DevTools pour les déboguer en est encore à ses débuts. Mais certaines premières fonctionnalités ont déjà atterri.

• Lorsque vous sélectionnez un élément dans DevTools dont les styles proviennent d'une règle @container , cette règle apparaît dans la barre latérale Styles du panneau Éléments. Ceci est similaire à la façon dont les styles de requêtes multimédias sont présentés dans DevTools et il sera facile de savoir d'où vient un certain style.

Comme le montre la capture d'écran ci-dessus, la barre latérale Styles affiche 2 règles qui s'appliquent à l'élément actuel. Celui du bas s'applique à l'élément .media à tout moment et fournit son style par défaut. Et celui du haut est imbriqué dans une requête de conteneur @container (max-width:300px) qui ne prend effet que lorsque le conteneur est plus étroit que 300px.

• En plus de cela, juste au-dessus de la règle at @container , le volet Styles affiche un lien vers l'élément auquel la règle se résout, et le survol affiche des informations supplémentaires sur sa taille. De cette façon, vous savez exactement pourquoi la requête de conteneur correspond.

L'équipe Chrome DevTools travaille activement sur cette fonctionnalité et vous pouvez vous attendre à bien plus à l'avenir.

Collaboration Chrome

Avant d'aborder les fonctionnalités des autres navigateurs, parlons un peu de Chromium. Chromium est un projet open source sur lequel Chrome, Edge, Brave et d'autres navigateurs sont construits. Cela signifie que tous ces navigateurs ont accès aux fonctionnalités de Chromium.

Deux des contributeurs les plus actifs à ce projet sont Google et Microsoft et, en ce qui concerne DevTools, ils ont collaboré sur quelques fonctionnalités intéressantes que j'aimerais aborder maintenant.

Outils de débogage de mise en page CSS

Il y a quelques années, Firefox a innové dans ce domaine et a livré les tout premiers inspecteurs de grille et de flexbox. Les navigateurs basés sur Chromium permettent désormais aux développeurs Web de déboguer facilement la grille et la flexbox.

Ce projet collaboratif a impliqué des ingénieurs, des chefs de produit et des designers de Microsoft et Google, travaillant vers un objectif commun (en savoir plus sur le projet lui-même dans ma conférence BlinkOn).

Entre autres choses, DevTools dispose désormais des fonctionnalités de débogage de mise en page suivantes :

• Mettez en surbrillance plusieurs mises en page de grille et flexibles sur la page et personnalisez si vous souhaitez voir les noms ou les numéros de ligne de grille, les zones de grille, etc.

• Éditeurs flexibles et de grille pour jouer visuellement avec les différentes propriétés.

• Les icônes d'alignement dans la saisie semi-automatique CSS facilitent le choix des propriétés et des valeurs.

• Mettez en surbrillance le survol de la propriété pour comprendre à quelles parties de la page une propriété s'applique.

Vous pouvez lire plus d'informations à ce sujet sur les sites de documentation de Microsoft et de Google.

Localisation

Il s'agissait d'un autre projet collaboratif impliquant Microsoft et Google qui, désormais, permet à tous les DevTools basés sur Chromium d'être traduits dans des langues autres que l'anglais.

À l'origine, il n'y avait jamais eu de plan pour localiser DevTools, ce qui signifie que c'était un énorme effort. Cela impliquait de parcourir l'intégralité de la base de code et de rendre les chaînes d'interface utilisateur localisables.

Le résultat en valait pourtant la peine. Si l'anglais n'est pas votre langue maternelle et que vous vous sentez plus à l'aise avec DevTools dans une autre langue, rendez-vous dans Paramètres ( F1 ) et recherchez la liste déroulante des langues.

Voici une capture d'écran de ce à quoi cela ressemble dans Chrome DevTools :

Et voici à quoi ressemble Edge en japonais :

Outils de développement Edge

Microsoft est passé à Chromium pour développer Edge il y a plus de 2 ans maintenant. Bien qu'à l'époque, cela ait suscité de nombreuses discussions dans la communauté Web, peu de choses ont été écrites ou dites à ce sujet depuis lors. Les personnes travaillant sur Edge (y compris ses DevTools) ont cependant été occupées, et le navigateur possède désormais de nombreuses fonctionnalités uniques.

Être basé sur le projet open source Chromium signifie qu'Edge bénéficie de toutes ses fonctionnalités et corrections de bogues. Concrètement, l'équipe Edge ingère les modifications apportées au référentiel Chromium dans son propre référentiel.

Mais au cours de la dernière année environ, l'équipe a commencé à créer des fonctionnalités spécifiques à Edge en fonction des besoins et des commentaires des utilisateurs d'Edge. Edge DevTools a maintenant une série de fonctionnalités uniques que je vais passer en revue.

Outils d'ouverture, de fermeture et de déplacement

Avec près de 30 panneaux différents, DevTools est un logiciel vraiment compliqué dans n'importe quel navigateur. Mais, vous n'avez jamais vraiment besoin d'accéder à tous les outils en même temps. En fait, lorsque vous démarrez DevTools pour la première fois, seuls quelques panneaux sont visibles et vous pouvez en ajouter d'autres ultérieurement.

Par contre, il est difficile de découvrir les panneaux qui ne sont pas affichés par défaut, même s'ils pourraient vous être vraiment utiles.

Edge a ajouté 3 fonctionnalités petites mais puissantes pour résoudre ce problème :

• un bouton de fermeture sur les onglets pour fermer les outils dont vous n'avez plus besoin,
• un bouton + (plus) à la fin de la barre d'onglets pour ouvrir n'importe quel outil,
• une option de menu contextuel pour déplacer les outils.

Le GIF suivant montre comment fermer et ouvrir des outils dans les zones principale et de tiroir peuvent être effectués dans Edge.

Vous pouvez également déplacer des outils entre la zone principale et la zone des tiroirs :

• un clic droit sur un onglet en haut affiche un élément "Déplacer vers le bas", et
• un clic droit sur un onglet du tiroir affiche un élément "Déplacer vers le haut".

Obtenir une aide contextuelle avec les info-bulles de DevTools

Il est difficile pour les débutants comme pour les développeurs chevronnés de tout savoir sur DevTools. Comme je l'ai déjà mentionné, il y a tellement de panneaux qu'il est peu probable que vous les connaissiez tous.

Pour résoudre ce problème, Edge a ajouté un moyen de passer directement des outils à leur documentation sur le site Web de Microsoft.

Cette nouvelle fonctionnalité d'info-bulles fonctionne comme une superposition basculante qui couvre les outils. Lorsqu'il est activé, les panneaux sont mis en surbrillance et une aide contextuelle est fournie pour chacun d'eux, avec des liens vers la documentation.

Vous pouvez démarrer les info-bulles de 3 manières différentes :

• en utilisant le raccourci clavier Ctrl + Maj + H sous Windows/Linux ( Cmd + Maj + H sur Mac) ;
• en allant dans le menu principal ( ... ), puis en allant dans l'aide et en sélectionnant "Toggle the DevTools Tooltips" ;
• en utilisant le menu de commande et en tapant "Info-bulles".

Personnalisation des couleurs

Dans les environnements d'édition de code, les développeurs adorent personnaliser leurs thèmes de couleurs pour rendre le code plus facile à lire et plus agréable à regarder. Étant donné que les développeurs Web passent également beaucoup de temps dans DevTools, il est logique qu'il ait également des couleurs personnalisables.

Edge vient d'ajouter un certain nombre de nouveaux thèmes à DevTools, en plus des thèmes sombres et clairs déjà disponibles. Au total, 9 nouveaux thèmes ont été ajoutés. Ceux-ci proviennent de VS Code et seront donc familiers aux personnes utilisant cet éditeur.

Vous pouvez sélectionner le thème que vous souhaitez utiliser en allant dans les paramètres (en utilisant F1 ou l'icône d'engrenage dans le coin supérieur droit), ou en utilisant le menu de commande et en tapant theme .

Outils de développement Firefox

Semblable à l'équipe Chrome DevTools, les personnes travaillant sur Firefox DevTools ont été occupées par une grande actualisation de l'architecture visant à moderniser leur base de code. De plus, leur équipe est un peu plus petite ces jours-ci car Mozilla a dû se recentrer ces derniers temps. Mais, même si cela signifie qu'ils ont eu moins de temps pour ajouter de nouvelles fonctionnalités, ils ont quand même réussi à en publier quelques-unes vraiment intéressantes que je vais passer en revue maintenant.

Débogage des barres de défilement indésirables

Vous êtes-vous déjà demandé : "d'où vient cette barre de défilement ?" Je sais que j'ai, et maintenant Firefox a un outil pour déboguer ce problème.

Dans le panneau Inspecteur, tous les éléments qui défilent ont un badge de scroll à côté d'eux, ce qui est déjà utile lorsqu'il s'agit d'arborescences DOM profondément imbriquées. En plus de cela, vous pouvez cliquer sur ce badge pour révéler l'élément (ou les éléments) qui a fait apparaître la barre de défilement.

Vous pouvez trouver plus de documentation à ce sujet ici.

Visualisation de l'ordre de tabulation

Naviguer dans une page Web avec le clavier nécessite d'utiliser la touche de tab pour se déplacer un par un dans les éléments pouvant être sélectionnés. L'ordre dans lequel les éléments focalisables sont ciblés lors de l'utilisation de l' tab est un aspect important de l'accessibilité de votre site et un ordre incorrect peut être source de confusion pour les utilisateurs. Il est particulièrement important d'y prêter attention, car les techniques CSS de mise en page modernes permettent aux développeurs Web de réorganiser très facilement les éléments d'une page.

Firefox dispose d'un panneau Inspecteur d'accessibilité utile qui fournit des informations sur l'arborescence d'accessibilité, trouve et signale automatiquement divers problèmes d'accessibilité et vous permet de simuler différentes déficiences de la vision des couleurs.

En plus de ces fonctionnalités, le panneau fournit désormais une nouvelle superposition de page qui affiche l'ordre de tabulation des éléments pouvant être sélectionnés.

Pour l'activer, utilisez la case à cocher "Afficher l'ordre de tabulation" dans la barre d'outils.

Vous pouvez trouver plus de documentation à ce sujet ici.

Un tout nouvel outil de performance

Peu de domaines de développement Web dépendent autant des outils que l'optimisation des performances. Dans ce domaine, le panneau Performances de Chrome DevTools est le meilleur de sa catégorie.

Au cours des dernières années, les ingénieurs de Firefox se sont concentrés sur l'amélioration des performances du navigateur lui-même, et pour les aider à le faire, ils ont créé un outil de profilage des performances. L'outil a été conçu à l'origine pour optimiser le code natif du moteur, mais a également pris en charge l'analyse des performances JavaScript dès le début.

Aujourd'hui, ce nouvel outil de performance remplace l'ancien panneau de performance de Firefox DevTools dans les versions préliminaires (Nightly et Developer Edition). Prenez-le pour un tour quand vous en avez l'occasion.

Entre autres choses, le nouveau profileur Firefox prend en charge le partage de profils avec d'autres afin qu'ils puissent vous aider à améliorer les performances de votre cas d'utilisation enregistré.

Vous pouvez lire la documentation à ce sujet ici et en savoir plus sur le projet sur leur référentiel GitHub.

Inspecteur Web Safari

Enfin, passons en revue quelques-unes des fonctionnalités récentes de Safari.

La petite équipe d'Apple s'est occupée d'un large éventail d'améliorations et de correctifs autour des outils. En savoir plus sur Safari Web Inspector peut vous aider à être plus productif lors du débogage de vos sites sur des appareils iOS ou tvOS. De plus, il possède un tas de fonctionnalités que les autres DevTools n'ont pas et que peu de gens connaissent.

Débogage de la grille CSS

Avec Firefox, Chrome et Edge (et tous les navigateurs basés sur Chromium) disposant d'outils dédiés pour visualiser et déboguer les grilles CSS, Safari était le dernier navigateur majeur à ne pas l'avoir. Eh bien, maintenant c'est le cas !

Fondamentalement, Safari a maintenant les mêmes fonctionnalités que les DevTools des autres navigateurs dans ce domaine. C'est très bien car cela signifie qu'il est facile de passer d'un navigateur à l'autre tout en restant productif.

• Les badges de grille sont affichés dans le panneau Éléments pour trouver rapidement les grilles.
• Cliquer sur le badge bascule la superposition de visualisation sur la page.
• Un nouveau panneau Disposition est maintenant affiché dans la barre latérale. Il vous permet de configurer la superposition de la grille, de voir la liste de toutes les grilles sur la page et de basculer la superposition pour elles.

Ce qui est intéressant dans la mise en œuvre de Safari, c'est qu'ils ont vraiment cloué l'aspect performance de l'outil. Vous pouvez activer plusieurs superpositions différentes à la fois et faire défiler la page sans que cela ne cause de problèmes de performances.

L'autre chose intéressante est que Safari a introduit un panneau Éléments à 3 volets, tout comme Firefox, qui vous permet de voir le DOM, les règles CSS pour l'élément sélectionné et le panneau Disposition en même temps.

Pour en savoir plus sur l'inspecteur de grille CSS, consultez cet article de blog WebKit.

Une multitude d'améliorations du débogueur

Safari avait auparavant un panneau Ressources et Débogueur séparé. Ils les ont fusionnés en un seul panneau Sources qui facilite la recherche de tout ce dont vous avez besoin lors du débogage de votre code. De plus, cela rend l'outil plus cohérent avec Chromium auquel beaucoup de gens sont habitués.

La cohérence des tâches courantes est importante dans un monde multi-navigateurs. Les développeurs Web doivent déjà tester sur plusieurs navigateurs, donc s'ils ont besoin d'apprendre un tout nouveau paradigme lors de l'utilisation des DevTools d'un autre navigateur, cela peut rendre les choses plus difficiles qu'elles ne devraient l'être.

Mais Safari s'est également récemment concentré sur l'ajout de fonctionnalités innovantes à son débogueur que les autres DevTools n'ont pas.

Script d'amorçage :
Safari vous permet d'écrire du code JavaScript dont l'exécution est garantie avant tous les scripts de la page. Ceci est très utile pour instrumenter les fonctions intégrées pour ajouter des instructions de debugger ou la journalisation par exemple.

Nouvelles configurations de points d'arrêt :
Tous les navigateurs prennent en charge plusieurs types de points d'arrêt, tels que les points d'arrêt conditionnels, les points d'arrêt DOM, les points d'arrêt d'événement, etc.

Safari a récemment amélioré toute sa suite de types de points d'arrêt en leur donnant à tous un moyen de les configurer de manière approfondie. Avec cette nouvelle fonctionnalité de point d'arrêt, vous pouvez décider :

• si vous voulez qu'un point d'arrêt n'atteigne que lorsqu'une certaine condition est vraie,
• si vous voulez que le point d'arrêt suspende l'exécution ou exécute simplement du code,
• ou même jouer un bip audio pour savoir qu'une ligne de code a été exécutée.

Fonctions de console queryInstances et queryHolders :
Ces deux fonctions sont vraiment utiles lorsque votre site commence à utiliser beaucoup d'objets JavaScript. Dans certaines situations, il peut devenir difficile de suivre les dépendances entre ces objets et des fuites de mémoire peuvent également commencer à apparaître.

Safari dispose d'un outil de mémoire qui peut aider à résoudre ces problèmes en vous permettant d'explorer des instantanés de tas de mémoire. Mais parfois, vous savez déjà quelle classe ou quel objet est à l'origine du problème et vous voulez trouver quelles instances existent ou ce qui s'y réfère.

Si Animal est une classe JavaScript dans votre application, alors queryInstances(Animal) renverra un tableau de toutes ses instances.

Si foo est un objet dans votre application, alors queryHolders(foo) renverra un tableau de tous les autres objets qui ont des références à foo .

Réflexions finales

J'espère que ces fonctionnalités vous seront utiles. Je ne peux que recommander d'utiliser plusieurs navigateurs et de se familiariser avec leurs DevTools. Être plus familier avec d'autres DevTools peut s'avérer utile lorsque vous devez déboguer un problème dans un navigateur que vous n'utilisez pas régulièrement.

Sachez que les entreprises qui fabriquent des navigateurs ont toutes des équipes qui travaillent activement sur DevTools. Ils sont investis pour les rendre meilleurs, moins bogués et plus puissants. Ces équipes dépendent de vos commentaires pour construire les bonnes choses. Sans connaître les problèmes auxquels vous êtes confrontés ou les fonctionnalités qui vous manquent, il leur est plus difficile de prendre les bonnes décisions sur ce qu'il faut construire.

Signaler des bogues à une équipe DevTools ne vous aidera pas seulement lorsque le correctif arrivera, mais peut également aider de nombreuses autres personnes confrontées au même problème.

Il est bon de savoir que les équipes DevTools de Microsoft, Mozilla, Apple et Google sont généralement assez petites et reçoivent beaucoup de commentaires, donc signaler un problème ne signifie pas qu'il sera résolu rapidement, mais cela aide, et ces équipes sont à l'écoute .

Voici quelques façons de signaler des bogues, de poser des questions ou de demander des fonctionnalités :

• Outils de développement Firefox
  • Firefox utilise Bugzilla comme traqueur de bogues public et tout le monde est invité à signaler des bogues ou à demander de nouvelles fonctionnalités en y créant une nouvelle entrée. Tout ce dont vous avez besoin est un compte GitHub pour vous connecter.
  • Entrer en contact avec l'équipe peut se faire soit sur Twitter en utilisant le compte @FirefoxDevTools, soit en se connectant au chat Mozilla (trouver de la documentation sur le chat ici).
• Inspecteur Web Safari
  • Safari utilise également le suivi des bogues public pour ses bogues WebKit. Voici une documentation sur la façon de rechercher des bogues et d'en signaler de nouveaux.
  • Vous pouvez également entrer en contact avec l'équipe sur Twitter avec @webkit.
  • Enfin, vous pouvez également signaler des bogues concernant Safari et Safari Web Inspector à l'aide de l'assistant de commentaires.
• Outils de développement Edge
  • Le moyen le plus simple de signaler un problème ou de demander une fonctionnalité consiste à utiliser le bouton de commentaires dans DevTools (le petit bonhomme allumette dans le coin supérieur droit des outils).
  • Poser des questions à l'équipe fonctionne mieux sur Twitter en mentionnant le compte @EdgeDevTools.
• Outils de développement Chrome
  • L'équipe écoute les commentaires sur la liste de diffusion devtools-dev ainsi que sur Twitter à @ChromeDevTools.
• Chrome
  • Étant donné que Chromium est le projet open source qui alimente Google Chrome et Microsoft Edge (et d'autres), vous pouvez également signaler des problèmes sur le traqueur de bogues de Chromium.

Sur ce, merci d'avoir lu !