La depuración de problemas relacionados con el desplazamiento ahora es más fácil con la nueva insignia de desplazamiento de DevTools. En esta publicación, se explica qué son los elementos desplazables, por qué pueden ser difíciles de encontrar y cómo esta nueva función te ayuda a encontrarlos rápidamente. También te llevaremos tras bambalinas para que veas cómo desarrollamos la insignia de desplazamiento.
¿Qué es un elemento desplazable?
Si puedes desplazar el contenido dentro de un elemento, significa que es un elemento desplazable (o contenedor de desplazamiento). No importa si tiene barras de desplazamiento o no.
¿Por qué es difícil encontrar el elemento desplazable?
Depurar problemas de desplazamiento es difícil. Sin una herramienta que muestre claramente el elemento desplazable, es fácil perderse, especialmente en páginas complejas cuando no hay barras de desplazamiento.
Encontrar manualmente el elemento que se desplaza puede ser un proceso tedioso de prueba y error:
- Tú eliges un elemento y modificas sus estilos.
- ¿Desapareció la barra de desplazamiento? De lo contrario, repite el proceso.
Presentamos la insignia de desplazamiento
En Chrome 130, puedes usar la nueva insignia de desplazamiento en el panel Elementos para ubicar los elementos desplazables.
Por ejemplo, usa la nueva insignia de desplazamiento para intentar encontrar qué elemento provoca que aparezcan las barras de desplazamiento en el siguiente ejemplo.
Implementación técnica de la nueva insignia de desplazamiento
En segundo plano, la implementación se divide en dos partes:
- Cómo identificar elementos desplazables Usa los indicadores
Blink’s(motor de renderización de Chrome) para identificar los elementos que se pueden desplazar o que se volvieron desplazables debido a un cambio en la página. - Mostrar la insignia de desplazamiento Cuando recibimos los indicadores, incorporamos una nueva insignia (similar a las insignias de cuadrícula existentes) junto a los elementos desplazables en el panel Elementos.
Cómo identificar elementos desplazables
Para identificar los elementos desplazables, usamos el método IsUserScrollable en Blink. Este método determina si un nodo se puede desplazar comprobando si se desborda en el eje X o Y, lo que indica que el contenido supera las dimensiones del contenedor y se puede desplazar. Llamamos a este método cada vez que se carga un elemento nuevo en DevTools para identificar los contenedores desplazables.
Para actualizar de forma dinámica el estado de desplazamiento de los elementos que ya están cargados, tuvimos que profundizar en la base de código del motor de renderización de Blink para hacer un seguimiento de dónde se agrega o quita el área desplazable de un nodo.
El componente PaintLayerScrollableArea administra el desbordamiento de control de la lógica principal. Específicamente, el método UpdateScrollableAreaSet es responsable de detectar cuándo se produjo un desbordamiento o se resolvió.
Esta información se retransmite al backend de DevTools mediante el envío de la referencia del nodo que cambió su ScrollableArea.
Luego, el backend vuelve a verificar el nodo con el método IsUserScrollable para obtener su estado nuevo. Después de verificar la capacidad de desplazamiento, se envía un indicador al frontend con Chrome DevTools Protocol, lo que garantiza que la IU refleje con precisión los cambios en el contenido desplazable.
Cómo mostrar la insignia de desplazamiento
Para agregar la nueva insignia en el frontend de DevTools, creamos un método de controlador en ElementsTreeOutline que recibió el nodeId del elemento que cambió su estado de desplazamiento por un evento.
En ese controlador, recuperamos el objeto ElementsTreeElement con nodeId y le indicamos que actualice su insignia de desplazamiento.
Actualizar la insignia de desplazamiento implica verificar si el elemento se puede desplazar y si ya tiene una insignia de desplazamiento. En función de estas condiciones, se toman las siguientes medidas:
- Si el elemento se puede desplazar y aún no tiene una insignia de desplazamiento, se agrega una.
- Si el elemento no se puede desplazar, pero tiene una insignia de desplazamiento, se quita la insignia existente.
La lógica especial para controlar el documento de nivel superior desplazable
Cuando el documento de nivel superior se puede desplazar, tenemos un caso especial porque no mostramos el elemento #document para el documento principal, solo para los iframes. Por lo tanto, no podemos mostrar la insignia directamente en los elementos #document.
En su lugar, decidimos mostrar la insignia de desplazamiento en el elemento </html>, incluidas las de Quirks mode en las que document.scrollingElement() muestra <body> o null. Esta decisión evita confusiones entre los documentos desplazables y los elementos del cuerpo desplazables, en particular en las páginas en las que el cuerpo se puede desplazar de forma independiente.
Descubrimos que esta es la forma más clara de mostrarles a los desarrolladores qué elementos se pueden desplazar.
Cambios en el Protocolo de herramientas para desarrolladores de Chrome (CDP)
Para integrar la nueva insignia de desplazamiento, se tuvieron que hacer cambios en Chrome DevTools Protocol (CDP). CDP funciona como un protocolo de comunicación entre Herramientas para desarrolladores y Chrome.
Tuvimos que cambiar el protocolo para abarcar los dos casos:
- ¿Se puede desplazar este nodo cuando se carga en DevTools?
- ¿Este nodo actualizó su estado de desplazamiento?
¿Se puede desplazar este nodo cuando se carga en DevTools?
Agregamos una nueva propiedad llamada isScrollable al tipo de datos DOM.Node que se envía cada vez que se carga un nodo nuevo en el frontend de DevTools.
Decidimos propagar esta propiedad solo cuando es verdadera para evitar cargar datos innecesarios. Por lo tanto, cuando no se envía la propiedad, suponemos que el elemento no se puede desplazar.
¿Este nodo actualizó su estado de desplazamiento?
Para detectar si un nodo actualizó su estado de desplazamiento, presentamos un nuevo evento scrollableFlagUpdated en CDP, que se activa cada vez que un elemento gana o pierde un área desplazable. El evento tiene la siguiente estructura:
# 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
Sugerencia profesional: Examina los nuevos cambios de CDP en tu navegador
Si te interesa saber cómo se comunica Chrome con DevTools, hay una forma sencilla de explorarlo.
El panel Protocol Monitor te permite ver los eventos en tiempo real que se intercambian entre Chrome y DevTools, incluido el evento agregado recientemente para la insignia de desplazamiento. Por ejemplo, cuando modificas el estilo de un elemento que afecta su capacidad de desplazamiento, puedes ver de inmediato los eventos de CDP relacionados a medida que ocurren.
Para obtener una guía más detallada, consulta Protocol monitor: View and send CDP requests.
Más allá de desplazarse: Presentamos la insignia de menú ampliado
Además, estamos trabajando en una nueva insignia de desbordamiento para identificar la causa de ese desplazamiento. Esta insignia aparecerá junto a los elementos que exceden su contenedor, lo que te ayudará a diagnosticar rápidamente problemas de diseño.
Funcionará de la siguiente manera:
- Depuración interactiva. Haz clic en la insignia de desplazamiento para activar un comando del Protocolo de DevTools que identifique los elementos secundarios desbordados.
- Visualiza el desbordamiento. Asociaremos los límites de los elementos dentro del contenedor desplazable para detectar cualquier desbordamiento.
- Destaca al culpable. La insignia de desbordamiento marcará estos elementos desbordados y, si haces clic en ella, se destacarán directamente en el DOM.
Esto les brindará a los desarrolladores una nueva y potente herramienta para comprender y solucionar los problemas de diseño causados por el desbordamiento de contenido. Creemos que este nivel de análisis más profundo optimizará significativamente tu flujo de trabajo de depuración.