Déboguer plus facilement les problèmes de défilement grâce au nouveau badge de défilement des outils de développement. 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 découvrir comment nous avons développé le badge "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 de défilement). 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 du 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 arrière-plan, l'implémentation se divise 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 à faire défiler ou qui sont devenus à faire défiler en raison d'une modification de la page. - Affichage du badge de défilement À la réception des signaux, nous incorporons un nouveau badge (semblable aux badges grid existants) à côté des éléments à faire défiler dans le panneau Elements (É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 peut faire l'objet d'un défilement en vérifiant s'il dépasse le long de l'axe X ou Y, ce qui indique que le contenu dépasse les dimensions du conteneur et qu'il est possible de le faire 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 de manière dynamique l'état de défilement des éléments déjà chargés, nous avons dû examiner en détail le codebase du moteur de rendu Blink afin de savoir où la zone déroulante 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 si 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 à nouveau 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 l'interface des outils de développement, nous avons créé une méthode de gestionnaire dans la ElementsTreeOutline, qui a reçu le nœudId de l'élément dont l'état de défilement a été modifié par un événement.
Dans ce gestionnaire, nous récupérons l'objet ElementsTreeElement à l'aide de nodeId et nous 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 n'a 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 afin de couvrir les deux cas:
- Ce nœud peut-il être défilé lorsqu'il est chargé dans les outils de développement ?
- 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 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 des outils de développement.
Nous avons décidé de renseigner cette propriété uniquement lorsque c'est vrai, afin d'éviter de charger des données inutiles. Par conséquent, lorsque la propriété n'est pas envoyée, nous considérons que l'élément ne peut 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 Moniteur de protocole vous permet d'afficher en temps réel les événements échangés entre Chrome et les outils de développement, y compris le nouvel événement associé au 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 fonctionne:
- 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 "overflow" signale ces éléments. Cliquez dessus pour les mettre 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.