Microsoft Edge DevTools mejora la herramienta Vista 3D para visualizar problemas de desarrollo web

Microsoft ha anunciado grandes mejoras en la herramienta Visor 3D, que forma parte de las Herramientas de desarrollo. La herramienta está obteniendo bastantes mejoras de rendimiento que deberían ayudar a los desarrolladores web a identificar, corregir y mejorar los múltiples elementos que en conjunto conforman un sitio web.

La herramienta Vista 3D ha demostrado ser muy útil para visualizar y resolver problemas comunes de desarrollo web, como la complejidad del DOM, las barras de desplazamiento no deseadas o los problemas de superposición del índice z. La herramienta de vista 3D, así como las DevTools, obviamente no están destinadas al usuario web promedio. Sin embargo, aquellos que ya usan herramientas de desarrollo deberían beneficiarse de las nuevas características , aseguró Microsoft.

La herramienta Vista 3D siempre ha sido una de las formas más rápidas de encontrar contenedores profundamente anidados. La pestaña DOM de la herramienta Vista 3D muestra rápidamente el árbol DOM en 3 dimensiones y ayuda a los desarrolladores a determinar qué parte de su página podría tener demasiados envoltorios.

La pestaña DOM de la herramienta también brinda a los desarrolladores una descripción general de toda la página web y les permite alejarse y desplazarse por la escena hasta que los elementos fuera de la ventana gráfica se vuelvan visibles. Al hacer clic en uno de los elementos, los desarrolladores pueden acceder directamente a la herramienta Elementos.

Depuración de problemas de apilamiento de índice z:

La herramienta Vista 3D tiene una pestaña de índice Z que hace que la exploración sea más fácil e intuitiva. La herramienta le permite ver qué elementos están apilando contextos y cómo se apilan los elementos a lo largo del índice z. Esto puede ayudarlo a encontrar rápidamente problemas comunes.

Depuración de problemas de rendimiento con capas de grupo:

Esta nueva característica divide una página web en el número correcto u optimizado de capas. Esto mejora enormemente el rendimiento, especialmente cuando algunos componentes se animan o cambian independientemente del resto.

Microsoft ha agregado una nueva pestaña de «Capas compuestas» para detectar las capas creadas. La barra lateral de la izquierda muestra una lista de capas y, al pasar el cursor sobre cada una, se resalta en la escena 3D. El panel resaltará información importante sobre las capas, como el tamaño y la memoria requerida para renderizarlas.