El panel Capas te ayuda a comprender la composición de tu sitio web y cómo el navegador renderiza el contenido. Analiza un diagrama 3D de tu sitio web para identificar problemas de renderización, corregir errores de desplazamiento y optimizar las animaciones.
Descripción general
Usa el panel Layers para hacer lo siguiente:
- Consulta las capas del documento.
- Inspecciona las capas del documento.
- Establece puntos de interrupción de cambio de DOM.
- Consulta la información del generador de perfiles de procesamiento.
- Identifica los elementos de desplazamiento lento.
Abre el panel Capas
Para abrir el panel Layers, sigue estos pasos:
- Abre las Herramientas para desarrolladores.
- Para abrir el menú de comandos, presiona lo siguiente:
- macOS: Comando+Mayúsculas+P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Layers, selecciona Show Layers panel y presiona Intro.
Como alternativa, en la esquina superior derecha, selecciona more_vert Más opciones > Más herramientas > Panel Capas.
Además, el panel Rendimiento te permite ver las capas de cada fotograma de una grabación en la pestaña Capas. Para obtener más información, consulta Cómo ver la información de las capas.
Cómo ver las capas de un documento
En la sección de la izquierda del panel Layers, se enumeran todas las capas renderizadas del documento en un árbol expandible. Este árbol se actualiza a medida que navegas por la página. Las capas se identifican por su selector CSS o con un número, seguido de las dimensiones de la capa en píxeles.
Coloca el cursor sobre una capa para destacarla en la página web y en el diagrama. Aparecerá una información sobre la herramienta en la página con la siguiente información:
- Los selectores de la capa.
- Son las dimensiones de la capa, en píxeles.
- Un ícono que representa la cuadrícula o el elemento flex de CSS, cuando corresponda.
Inspecciona las capas de documentos
Haz clic en una capa para ver más información en el panel Detalles.
Según la capa, aparecerá la siguiente información:
- Tamaño
- Motivos de composición
- Estimación de la memoria
- Cantidad de renderizaciones
- Regiones de desplazamiento lento
- Restricción de posición fija
En el diagrama, se muestra cómo se apilan y organizan las capas para esta página, incluidos los elementos que se ubican fuera del viewport.
Para mover el diagrama, sigue estos pasos:
- Usa WASD para mover el diagrama. Presiona W para desplazarte hacia arriba, A para desplazarte hacia la izquierda, S para desplazarte hacia abajo y D para desplazarte hacia la derecha.
- Haz clic en Modo de desplazamiento drag_pan o presiona X y arrástralo para moverte a lo largo de los ejes X e Y.
- Haz clic en Modo de rotación 360 o presiona V y arrastra para rotar a lo largo del eje Z.
- Haz clic en Restablecer transformación zoom_in_map o presiona 0 para restablecer el diagrama a su posición original.
- Para acercar la imagen, presiona Mayúsculas + + o sube la rueda del mouse.
- Para alejar la imagen, presiona Mayúsculas + - o la rueda del mouse hacia abajo.
Para ver el elemento DOM correspondiente de una capa en el panel de elementos, haz clic con el botón derecho en una capa del diagrama o del árbol de capas y, luego, en Mostrar en el panel de elementos.
Además, el panel Capas oculta ciertas capas que no alojan ni dibujan contenido. Para mostrar estas capas, haz clic con el botón derecho en el árbol de capas y selecciona Mostrar capas internas.
Establece puntos de interrupción de cambio de DOM
El panel Capas te permite establecer puntos de interrupción de cambio de DOM.
Para establecer un punto de interrupción de cambio de DOM, sigue estos pasos:
- Haz clic con el botón derecho en una capa del árbol de capas.
- Coloca el cursor sobre Break on y, luego, selecciona Subtree modifications, Attribute modifications o Node removal.
Consulta una lista de los puntos de interrupción de cambios del DOM en los siguientes lugares:
- Elementos > Pestaña Puntos de interrupción de DOM.
- Sección desplegable Sources > DOM Breakpoints.
Para obtener más información sobre los tipos de puntos de interrupción, consulta Tipos de puntos de interrupción de cambios de DOM.
Cómo ver la información del generador de perfiles de renderizado
El panel Layers te permite ver información detallada de pintura sobre una capa y renderizar el contenido de la página web en el diagrama 3D.
Para activar el Generador de perfiles de pintura, sigue estos pasos:
- Marca la casilla de verificación check_box Paints en la barra de acción.
- Selecciona una capa del árbol de capas.
- Haz clic en Paint Profiler en la parte inferior del panel Details. Ten en cuenta que no todas las capas tendrán esta opción.
Se abrirá la pestaña Profiler con registros de pintura y un histograma que representa la distribución del costo de pintura.
Si activas Pinturas, también se renderizará la mayor parte del contenido de la página web en el diagrama.
Identifica los elementos de desplazamiento lento
Algunos sitios web usan JavaScript para detectar eventos de desplazamiento o de tacto en elementos de una manera que puede afectar negativamente las velocidades de desplazamiento. Para identificar las capas que contienen objetos de escucha de eventos relacionados con el desplazamiento que pueden perjudicar el rendimiento, haz clic en la casilla de verificación check_box Slow scroll rects.
Las capas que pueden causar un desplazamiento lento se destacan en rosa.