Le débogage des problèmes liés au défilement est désormais plus facile grâce au nouveau badge de défilement de DevTools. Cet article explique ce que sont les éléments à faire défiler, pourquoi ils peuvent être difficiles à trouver et comment cette nouvelle fonctionnalité vous aide à les trouver rapidement. Nous vous emmènerons également dans les coulisses pour vous montrer comment nous avons développé le badge de défilement.
Qu'est-ce qu'un élément déroulant ?
Si vous pouvez faire défiler le contenu d'un élément, il s'agit d'un élément à faire défiler (ou d'un conteneur à faire défiler). Peu importe qu'il comporte des barres de défilement ou non.
Pourquoi est-il difficile de trouver l'élément à faire défiler ?
Il est difficile de déboguer les problèmes de défilement. Sans outil permettant de montrer clairement l'élément à faire défiler, il est facile de se perdre, en particulier sur des pages complexes où il n'y a pas de barres de défilement.
Trouver manuellement l'élément qui défile peut être un processus fastidieux par tâtonnement:
- Vous sélectionnez un élément et modifiez ses styles.
- La barre de défilement a-t-elle disparu ? Si ce n'est pas le cas, répétez le processus.
Présentation du badge de défilement
Dans Chrome 130, vous pouvez utiliser le nouveau badge de défilement dans le panneau Éléments pour localiser les éléments à faire défiler.
Par exemple, essayez de trouver l'élément qui provoque l'affichage des barres de défilement dans l'exemple suivant à l'aide du nouveau badge de défilement.
Implémentation technique du nouveau badge de défilement
En coulisses, l'implémentation est divisée en deux parties:
- Identifier les éléments à faire défiler Utilisez les signaux
Blink’s(moteur de rendu de Chrome) pour identifier les éléments qui peuvent être défilés ou qui sont devenus défilants en raison d'une modification de la page. - Affichage du badge de défilement Lorsque nous recevons les signaux, nous ajoutons un nouveau badge (semblable aux badges grille existants) à côté des éléments à faire défiler dans le panneau Éléments.
Identifier les éléments à faire défiler
Pour identifier les éléments à faire défiler, nous avons utilisé la méthode IsUserScrollable dans Blink. Cette méthode détermine si un nœud est à faire défiler en vérifiant s'il déborde sur l'axe X ou Y, ce qui indique que le contenu dépasse les dimensions du conteneur et peut être fait défiler. Nous appelons cette méthode chaque fois qu'un nouvel élément est chargé dans DevTools pour identifier les conteneurs à faire défiler.
Pour mettre à jour dynamiquement l'état de la possibilité de défilement des éléments déjà chargés, nous avons dû examiner en détail le code source du moteur de rendu Blink afin de suivre l'emplacement où la zone de défilement d'un nœud est ajoutée ou supprimée.
La logique de base qui gère le débordement est gérée par le composant PaintLayerScrollableArea. Plus précisément, la méthode UpdateScrollableAreaSet est chargée de détecter quand un débordement s'est produit ou a été résolu.
Ces informations sont transmises au backend DevTools en envoyant la référence du nœud qui a modifié son ScrollableArea.
Le backend vérifie ensuite le nœud à l'aide de la méthode IsUserScrollable pour obtenir son nouvel état. Après avoir vérifié la possibilité de défilement, un signal est envoyé au frontend à l'aide de Chrome DevTools Protocol, ce qui garantit que l'UI reflète précisément les modifications apportées au contenu à faire défiler.
Afficher le badge de défilement
Pour ajouter le nouveau badge dans le frontend de DevTools, nous avons créé une méthode de gestionnaire dans ElementsTreeOutline qui a reçu le nodeId de l'élément ayant modifié son état de défilement par un événement.
Dans ce gestionnaire, nous récupérons l'objet ElementsTreeElement à l'aide de nodeId et lui demandons de mettre à jour son badge de défilement.
Pour mettre à jour le badge de défilement, vous devez vérifier si l'élément est à faire défiler et s'il comporte déjà un badge de défilement. En fonction de ces conditions, les actions suivantes sont effectuées:
- Si l'élément est à faire défiler et qu'il ne comporte pas encore de badge de défilement, un badge est ajouté.
- Si l'élément n'est pas à faire défiler, mais qu'il comporte un badge de défilement, le badge existant est supprimé.
Logique spéciale pour gérer le document de premier niveau à faire défiler
Lorsque le document de niveau supérieur est à faire défiler, nous avons un cas particulier, car nous n'affichons pas l'élément #document pour le document principal, mais uniquement pour les iFrames. Par conséquent, nous ne pouvons pas afficher le badge directement sur les éléments #document.
Nous avons décidé d'afficher le badge de défilement sur l'élément </html>, y compris ceux de Quirks mode où document.scrollingElement() renvoie <body> ou null. Cette décision évite toute confusion entre les documents à faire défiler et les éléments de corps à faire défiler, en particulier sur les pages où le corps peut être fait défiler indépendamment.
Nous avons constaté que c'était le moyen le plus clair de montrer aux développeurs les éléments pouvant être défilés.
Modifications apportées au protocole Chrome DevTools (CDP)
Pour intégrer le nouveau badge de défilement, des modifications ont été apportées à Chrome DevTools Protocol (CDP). CDP sert de protocole de communication entre DevTools et Chrome.
Nous avons dû modifier le protocole pour couvrir les deux cas:
- Ce nœud est-il cliquable lorsqu'il est chargé dans les outils pour les développeurs ?
- Ce nœud a-t-il mis à jour son état de défilement ?
Ce nœud est-il cliquable lorsqu'il est chargé dans les outils pour les développeurs ?
Nous avons ajouté une nouvelle propriété nommée isScrollable au type de données DOM.Node, qui est envoyé chaque fois qu'un nouveau nœud est chargé dans l'interface utilisateur de DevTools.
Nous avons décidé de ne renseigner cette propriété que lorsqu'elle est vraie, afin d'éviter de charger des données inutiles. Par conséquent, lorsque la propriété n'est pas envoyée, nous supposons que l'élément n'est pas à faire défiler.
Ce nœud a-t-il mis à jour son état de défilement ?
Pour détecter si un nœud a mis à jour son état de défilement, nous avons introduit un nouvel événement scrollableFlagUpdated dans CDP, qui se déclenche chaque fois qu'un élément gagne ou perd une zone de défilement. L'événement présente la structure suivante:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
Conseil d'expert: Examiner les nouvelles modifications apportées aux CDP dans votre navigateur
Si vous souhaitez découvrir comment Chrome communique avec les outils pour les développeurs, il existe une méthode simple pour le faire.
Le panneau Surveillance du protocole vous permet de consulter les événements échangés en temps réel entre Chrome et DevTools, y compris l'événement nouvellement ajouté pour le badge de défilement. Par exemple, lorsque vous modifiez le style d'un élément qui affecte sa capacité à faire défiler l'écran, vous pouvez immédiatement voir les événements CDP associés au fur et à mesure qu'ils se produisent.
Pour en savoir plus, consultez Protocol monitor: View and send CDP requests.
Au-delà du défilement: présentation du badge à développer
Mieux encore, nous travaillons sur un nouveau badge de débordement pour identifier la cause de ce défilement. Ce badge s'affiche à côté des éléments qui débordent de leur conteneur pour vous aider à diagnostiquer rapidement les problèmes de mise en page.
Voici comment cela fonctionnera:
- Débogage interactif Cliquez sur le badge de défilement pour déclencher une commande du protocole DevTools qui identifie les éléments enfants en trop.
- Visualisation du débordement Nous allons mapper les limites des éléments dans le conteneur à faire défiler pour détecter tout débordement.
- Mettre en avant le coupable Le badge de dépassement signale ces éléments en trop, et un clic dessus les met en surbrillance directement dans le DOM.
Les développeurs disposeront ainsi d'un nouvel outil puissant pour comprendre et résoudre les problèmes de mise en page causés par le débordement du contenu. Nous pensons que ce niveau d'analyse plus approfondi simplifiera considérablement votre workflow de débogage.