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 capas de documentos.
- Inspecciona las capas de documentos.
- Establece puntos de interrupción de cambio de DOM.
- Consulta la información del generador de perfiles de renderizado.
- Identifica los elementos de desplazamiento lento.
Abrir 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: Command+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 de 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 Información sobre las capas de vista.
Cómo ver las capas de un documento
En la sección del extremo izquierdo del panel Capas, 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 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 posicionan 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 Reveal in the Elements panel.
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.
Cómo establecer puntos de interrupción de cambio de DOM
El panel Layers te permite establecer puntos de interrupción en el 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 Interrumpir en y, luego, selecciona Modificaciones de subárboles, Modificaciones de atributos o Eliminación de nodos.
Encuentra una lista de los puntos de interrupción de cambio de DOM en:
- Elementos > pestaña Interrupciones del 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 cambio 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 Pinturas de la barra de acciones.
- 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 obstaculizar el rendimiento, haz clic en la casilla de verificación check_box Rectángulos de desplazamiento lento.
Las capas que pueden causar un desplazamiento lento se destacan en rosa.