Descripción general de la pestaña Procesamiento

Sofia Emelianova

Descubre una colección de opciones que afectan la renderización del contenido web con esta descripción general de las funciones de la pestaña Renderización en DevTools.

Descripción general

La pestaña Renderización te permite hacer lo siguiente:

• Descubre los problemas de rendimiento de la renderización. Detecta la repintura, los cambios de diseño, las capas y las tarjetas, los problemas de desplazamiento, las estadísticas de renderización y las Métricas web esenciales.
• Emula las funciones de medios de CSS. Prueba cómo se renderizan las páginas con diferentes funciones multimedia de CSS sin especificarlas manualmente en tu código o entorno de prueba.
• Aplicar otros efectos útiles Destacar marcos de anuncios, emular el enfoque en una página, inhabilitar fuentes y formatos de imagen locales, habilitar un tema oscuro automático y emular deficiencias visuales

Abre la pestaña Renderización.

Para abrir la pestaña Renderización, haz lo siguiente:

1. Abre las Herramientas para desarrolladores.

2. Presiona Comando+Mayúsculas+P (Mac) o Control+Mayúsculas+P (Windows, Linux y ChromeOS) para abrir el menú de comandos.

   

3. Comienza a escribir rendering, selecciona Show Rendering y presiona Intro. DevTools muestra la pestaña Rendering en la parte inferior de la ventana de DevTools.

Como alternativa, puedes abrir la pestaña Renderización de las siguientes maneras:

• Presiona Esc para abrir el panel lateral y, en la esquina superior izquierda, haz clic en Más herramientas > Renderización.
• En la esquina superior derecha, haz clic en Más opciones > Más herramientas > Renderización.