Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Use la herramienta Vista 3D para depurar problemas de DOM, índice z y capa compuesta en una página web girando la página en el espacio 3D. La visualización 3D le ayuda a comprender la jerarquía del árbol DOM, la jerarquía del árbol de contexto de apilamiento índice z y las capas compuestas creadas en la página.
Contenido detallado:
- Introducción
- Abrir la herramienta Vista 3D
- Zoom, panorámica y rotación del lienzo 3D
- Pestaña Capas compuestas
- La pestaña de índice Z
- La pestaña DOM
- Barra de herramientas encima del lienzo 3D
- Controles de movimiento en la parte inferior derecha
- Consulte también
Introducción
Use la herramienta Vista 3D para depurar problemas de DOM, índice z y capa compuesta en una página web girando la página en el espacio 3D. La visualización 3D le ayuda a comprender la jerarquía del árbol DOM, la jerarquía del árbol de contexto de apilamiento índice z y las capas compuestas creadas en la página.
A la izquierda, la herramienta Vista 3D tiene tres pestañas:
La pestaña Capas compuestas muestra las capas compuestas que crea el navegador para la página web. Cada capa incluye una representación realista del contenido de la capa, para una experiencia completa a medida que se mueve la página en el espacio 3D.
La pestaña de índice Z muestra una representación 3D del árbol de contexto de apilamiento. Use esta pestaña para depurar problemas de apilamiento de índice z en la página web.
La pestaña DOM muestra una representación 3D del árbol DOM. Use esta pestaña para explorar el DOM como un todo, con todos los elementos fácilmente accesibles.
A la derecha, el lienzo 3D representa la página web según la pestaña y las opciones que selecciones.
Vídeo: Depuración de la Web en 3D
Abrir la herramienta Vista 3D
Puede abrir la herramienta Vista 3D en la barra de actividades o en el panel Vista rápida .
Para obtener el máximo espacio del lienzo, abra la herramienta Vista 3D en la Barra de Actividades.
Para utilizar la herramienta Elementos y la herramienta Vista 3D al mismo tiempo, abra la herramienta Vista 3D en el panel Vista rápida . Esto le permite ver los elementos del árbol DOM representados en el lienzo 3D. Esta es la opción predeterminada; en el menú de comandos, Mostrar vista 3D se indica como apertura en el panel Vista rápida .
Abrir la herramienta Vista 3D en la Barra de Actividades
Abra la página web que desea visualizar en 3D. Por ejemplo, usa la página de demostración de Refugio de animales .
Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.
En DevTools, en la barra de actividades, seleccione la pestaña Vista 3D . Si esa pestaña no está visible, haga clic en el botón Más herramientas (
). La pestaña Vista 3D se abre en la Barra de Actividades:
Abrir la herramienta Vista 3D en el panel Vista rápida
Abra la página web que desea visualizar en 3D. Por ejemplo, usa la página de demostración de Refugio de animales .
Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.
Si no se muestra el panel Vista rápida , seleccione Personalizar y controlar DevTools (...) y, después, seleccione Alternar el panel Vista rápida. O bien, cuando el foco esté en DevTools, presione Esc.
En la barra de herramientas Vista rápida , seleccione la pestaña Vista 3D . Si esa pestaña no está visible, haga clic en el botón Más herramientas (
). La pestaña Vista 3D se abre en el panel Vista rápida :
Habilitar WebGPU para el desarrollo en equipos sin una GPU de hardware
La herramienta Vista 3D se basa en la API de WebGPU para acceder a la GPU de hardware de alto rendimiento. En equipos sin una GPU de hardware, la solución alternativa es habilitar las siguientes marcas solo en un entorno de desarrollo.
Estas marcas no son requisitos previos rutinarios para abrir la herramienta Vista 3D . Si la herramienta funciona en su equipo, mantenga las marcas en su configuración predeterminada.
Precaución: Ten cuidado al habilitar estas marcas. La enable-unsafe-webgpu marca permite la mejor compatibilidad con WebGPU en configuraciones no compatibles y podría exponer problemas de seguridad a los sitios web. Use esa marca solo para su propio desarrollo. La ignore-gpu-blocklist marca invalida la lista de representación de software integrada del explorador, lo que permite la aceleración de GPU en configuraciones de sistema no admitidas. Estas marcas afectan al explorador, no solo a la herramienta Vista 3D .
Para probar esta solución alternativa:
En Microsoft Edge, guarde cualquier trabajo en las pestañas abiertas.
Vaya a
edge://flags.Busque
ignore-gpu-blocklisty establezca la marca en Habilitado. También puedes ir directamente aedge://flags/#ignore-gpu-blocklist.Busque
enable-unsafe-webgpuy establezca la marca en Habilitado. También puedes ir directamente aedge://flags/#enable-unsafe-webgpu.Aparece un botón Reiniciar en la esquina inferior derecha.
Haz clic en el botón Reiniciar .
Microsoft Edge se reinicia.
Vaya a la página web que desee visualizar.
Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.
Se abre DevTools.
Abra la herramienta Vista 3D .
Depurar la página web.
Cuando finalice la depuración, en
edge://flags, establezca laignore-gpu-blocklistmarca y laenable-unsafe-webgpumarca en Predeterminado (o Deshabilitado) y, a continuación, haga clic en el botón Reiniciar en la esquina inferior derecha.
Zoom, panorámica y rotación del lienzo 3D
Para ver la página web desde distintos ángulos, puede hacer zoom, desplazarse panorámicamente y girar el lienzo 3D que se muestra en el lado derecho de la herramienta Vista 3D .
Acercar o alejar la página
Para acercar o alejar la página web en el lienzo 3D, use la rueda del desplazamiento del mouse o use el control deslizante de la parte inferior derecha.
Vista panorámica (botón)
Para desplazar la página hacia la izquierda, derecha, arriba o abajo, haga clic en el botón Vista panorámica (
) y luego arrastre la página en el lienzo 3D en la dirección deseada con el mouse.
Girar vista (botón)
Para rotar la página con el mouse, haga clic en el botón Rotar vista (
) y luego arrastre la página en el lienzo 3D en el ángulo deseado con el mouse.
Para girar la página con el teclado, haga clic en el lienzo 3D para colocar el foco en él de modo que aparezca un borde negro y, a continuación, presione las teclas de dirección.
- Para girar la página horizontalmente, presione las teclas de flecha izquierda o derecha .
- Para girar la página verticalmente, presione las teclas de flecha arriba o abajo .
Las teclas giran la página, independientemente de si el botón Vista panorámica o Vista giratoria está seleccionado en la barra de herramientas.
Para obtener más información, consulte estas otras secciones de esta página:
Pestaña Capas compuestas
En la vista Capas compuestas, el lienzo 3D muestra la lista de capas creadas por el motor de representación del navegador para la página web.
Utilice la vista Capas compuestas para analizar cuántas capas crea el código CSS, su tamaño y la frecuencia con la que cambian.
En el lienzo 3D de la derecha, seleccione un elemento de la página web. En la pestaña Capas compuestas , el árbol de capas se expande automáticamente y la pestaña Detalles debajo del árbol de capas muestra información sobre la capa seleccionada:
Rectángulos de desplazamiento lento (casilla de verificación)
La casilla Rectángulos de desplazamiento lento resalta las secciones de la página que provocan un desplazamiento lento. Esta casilla es útil para investigar problemas de rendimiento. Algunas páginas web usan JavaScript para detectar el desplazamiento (o la función táctil) en determinados elementos de la página de una manera que puede hacer que el desplazamiento por la página web sea más lento de lo normal.
Esta casilla resalta (en rosa) las casillas de la página web representada que pueden causar estos problemas de rendimiento.
Esta casilla es similar a la casilla Problemas de rendimiento de desplazamiento de la herramienta Representación , que resalta los rectángulos lentos directamente en la página (en amarillo). Consulte Buscar problemas de rendimiento de desplazamiento en tiempo real en Referencia de características de rendimiento. Ambas casillas se basan en la misma información de depuración, pero estas dos herramientas presentan esta información de forma diferente.
Pinturas (casilla)
Representa el contenido de la página web (archivo de imagen o color) en los elementos.
Árbol del expansor de capas
Expanda este árbol para mostrar la lista de capas compuestas. Haga clic en una capa para mostrar información detallada sobre ella en el panel de información de detalles .
Detalles (panel de información)
El panel de información Detalles debajo del panel Capas compuestas contiene los siguientes campos.
Tamaño
La anchura y, a continuación, la altura de la capa compuesta seleccionada, junto con la ubicación de la parte superior izquierda de la capa con respecto a la parte superior izquierda de la ventana gráfica de la página. Por ejemplo, "1034 x 28055 (a 0, 0)".
Motivos de composición
Motivos por los que el motor de representación del navegador creó la capa. Por ejemplo: "Capa secundaria, para alojar contenido que se pueda desplazar".
Estimación de memoria
La memoria consumida para la capa seleccionada. Por ejemplo: "116 MB".
Recuento de pintura
Cuántas veces el motor de representación ha pintado la capa seleccionada.
La pestaña de índice Z
La pestaña índice Z muestra solo los elementos de la página web que apilan contextos o que se colocan a lo largo del eje z:
Para obtener más información, consulte Stacking context y Using z-index at MDN.
Tipo de elemento Mostrar (sección)
La sección Mostrar tipo de elementos de la pestaña índice Z controla qué elementos de la página se muestran en el lienzo 3D.
El botón de opción Mostrar todo muestra los elementos de contexto de apilamiento y los elementos que están posicionados en el eje z. Esta vista es útil para depurar problemas con elementos que están colocados incorrectamente en el eje z.
El botón de opción Mostrar solo contextos de apilamiento solo muestra los elementos de página que son contextos de apilamiento. Esta vista es útil para averiguar rápidamente qué elementos están apilando contextos en la página web.
La casilla Mostrar etiquetas de índice z muestra u oculta las etiquetas de índice z en el lienzo 3D. De forma predeterminada, esta casilla está seleccionada.
Tipo de color (sección)
En la pestaña índice Z , puede elegir entre los siguientes esquemas de color para visualizar el DOM en el lienzo 3D:
Botón de opción de púrpura a blanco: el lienzo 3D muestra elementos que van del púrpura al blanco.
Botón de opción Usar color de fondo: el lienzo 3D muestra elementos renderizados con el color de fondo definido para cada elemento.
Estos botones de radio le permiten alternar entre las opciones y elegir el tipo de color. El tipo de color es el más adecuado para el proyecto o uno que más le guste. Las etiquetas de índice z agregan información visual en el lienzo 3D, por lo que, según los comentarios de los usuarios, hay menos opciones de color en la pestaña de índice Z que en la pestaña DOM .
La pestaña DOM
La pestaña DOM proporciona una vista de depuración general del árbol del DOM. La pestaña DOM muestra todos los elementos de la página web en el lienzo 3D:
Las coordenadas X e Y de un elemento en el lienzo 3D coinciden con las coordenadas del elemento en la página web. La coordenada Z de un elemento se basa en la profundidad del elemento anidado en el árbol DOM.
Nivel de anidamiento para la página (control deslizante)
El control deslizante controla cuántos niveles del árbol DOM se muestran en el lienzo 3D. El valor que se muestra junto al control deslizante indica la profundidad máxima de los elementos que se muestran en el lienzo 3D. Si arrastra el control deslizante a la izquierda, las capas más externas se despegarán hasta que quede con un nivel de anidamiento establecido en 1, que muestra solo el elemento más alejado del DOM. Para quitar parte del desorden, arrastre el control deslizante para ver más de cerca lo que sucede en los niveles inferiores.
Botón Restablecer
Restablece el nivel de anidamiento del control deslizante de página al valor predeterminado de la página.
Tipo de color (sección)
En la pestaña DOM , puede elegir entre los siguientes esquemas de color para visualizar el DOM en el lienzo 3D:
Botón de opción de púrpura a blanco: el lienzo 3D muestra elementos que van del púrpura al blanco.
Botón de radio de azul a amarillo: el lienzo 3D muestra elementos que van del azul al amarillo.
Botón de radio arco iris : el lienzo 3D muestra elementos como púrpura, azul, verde, amarillo, naranja y rojo.
Usar botón de opción de textura de pantalla: representa el contenido de la página web (archivo de imagen o color) en los elementos.
Botón de opción Usar color de fondo: el lienzo 3D muestra elementos renderizados con el color de fondo definido para cada elemento.
Barra de herramientas encima del lienzo 3D
Repetir instantánea (botón)
Haga clic en el botón Repetir instantánea (
en la pestaña DOM o la pestaña de índice Z para actualizar la representación 3D del árbol DOM o el árbol contextual de apilamiento para que coincida con la última ventana gráfica de la página web. Por ejemplo, después de estrechar la ventanilla o al cambiar a una vista de emulación de dispositivo, por Emular dispositivos móviles (emulación de dispositivo).
Cuando se selecciona la pestaña Capas compuestas , este botón se omite, ya que la repetición de la instantánea se produce automáticamente al cambiar el tamaño de la ventanilla.
Restablecer vista (botón)
Haga clic en el botón Restablecer vista (
) para restablecer el desplazamiento panorámico y la rotación de la página.
Vista panorámica (botón)
Para desplazar la página hacia la izquierda, derecha, arriba o abajo, haga clic en el botón Vista panorámica () y luego arrastre la página en el lienzo 3D en la dirección deseada con el mouse.
Girar vista (botón)
Para rotar la página con el mouse, haga clic en el botón Rotar vista () y luego arrastre la página en el lienzo 3D en el ángulo deseado con el mouse.
Para girar la página con el teclado, haga clic en el lienzo 3D para colocar el foco en él de modo que aparezca un borde negro y, a continuación, presione las teclas de dirección.
- Para girar la página horizontalmente, presione las teclas de flecha izquierda o derecha .
- Para girar la página verticalmente, presione las teclas de flecha arriba o abajo .
Las teclas giran la página, independientemente de si el botón Vista panorámica o Vista giratoria está seleccionado en la barra de herramientas.
Aislar el elemento seleccionado (botón y sección)
En lugar de mostrar todos los elementos DOM de la página en el lienzo 3D, puede centrarse en mostrar solo una parte del DOM.
Seleccione un elemento de la página web en el lienzo 3D y, a continuación, haga clic en el botón Aislar el elemento seleccionado . El lienzo 3D muestra el elemento seleccionado y sus elementos primarios o secundarios, sin mostrar el resto de los elementos de la página.
Use este botón para mostrar el elemento que ha seleccionado en el lienzo 3D, a la vez que reduce el desorden que las páginas web complejas pueden crear en el lienzo 3D.
Incluir elementos primarios (casilla)
La casilla Incluir elementos primarios controla si los elementos principales de un elemento de página seleccionado se muestran en el lienzo 3D. La casilla Incluir elementos primarios está activada de manera predeterminada. Cuando esta casilla está seleccionada, para mostrar un elemento y cualquiera de sus elementos principales en el lienzo 3D, seleccione un elemento en el lienzo 3D o en la herramienta Elementos y, a continuación, haga clic en el botón Aislar el elemento seleccionado .
Esta casilla se muestra cuando se selecciona la pestaña Z-index o DOM .
Incluir elementos secundarios (casilla)
La casilla Incluir elementos secundarios solo se muestra cuando se selecciona la pestaña DOM .
Para mostrar solo el elemento DOM que seleccionó, junto con los elementos primarios y secundarios del elemento:
- Active las casillas de verificación Incluir elementos primarios e Incluir elementos secundarios y, a continuación, haga clic en el botón Aislar el elemento seleccionado . Esta es la opción predeterminada.
Para mostrar solo el elemento DOM que seleccionó, junto con los elementos principales del elemento, pero no los elementos secundarios del elemento:
- Seleccione la casilla Incluir elementos primarios , desactive la casilla Incluir elementos secundarios y, a continuación, haga clic en el botón Aislar el elemento seleccionado .
Para mostrar solo el elemento DOM que seleccionó, junto con los elementos secundarios del elemento, pero no los elementos principales del elemento:
- Desactive la casilla Incluir elementos primarios , active la casilla Incluir elementos secundarios y, a continuación, haga clic en el botón Aislar el elemento seleccionado .
Para mostrar solo el elemento DOM que seleccionó, sin sus elementos principales o secundarios:
- Desactive la casilla Incluir elementos primarios e Incluir elementos secundarios y, a continuación, haga clic en el botón Aislar el elemento seleccionado .
Controles de movimiento en la parte inferior derecha
Los controles de la parte inferior derecha del lienzo 3D funcionan igual, independientemente de la pestaña que seleccione.
Control deslizante del zoom: acerca o aleja la página, al igual que la rueda de desplazamiento del ratón, o arrastrando dos dedos por el panel táctil.
Botón arriba: mueve la página hacia arriba, en relación con el sistema de coordenadas de la página.
Botón de bajada: mueve la página hacia abajo en relación con el sistema de coordenadas de la página.
Botón izquierdo: mueve la página a la derecha, en relación con el sistema de coordenadas de la página.
Botón derecho: mueve la página a la izquierda en relación con el sistema de coordenadas de la página.