Herramienta Vista 3D de Microsoft Edge DevTools

En Microsoft Edge DevTools existe la herramienta de Vista 3D en la que se puede visualizar como se construyen las páginas web y ha estado en constante renovación, hace poco se agrego una nueva funcionalidad. Además, se actualizó la interfaz de navegación, para hacerla más rápida y fácil de usar.

Aquí te mostraremos algunas ventajas de la herramienta Vista 3D, las cuales pueden servir para resolver algunos problemas de desarrollo web, por ejemplo, la complejidad del DOM, Problemas de apilamiento del indica z o las barras de desplazamiento no deseadas, entre otras.

Resulta de mucha utilidad el poder visualizar una página web en 3D para quienes trabajan como desarrolladores web

Cuando se usan elementos HTML adicionales como <div> para que funcione alguna característica basada en JavaScript o lograr un cierto estilo, puede pasar, muy comúnmente, que se termina con árboles DOM.

Así el trabajo se vuelve un poco más complejo para trabajar con código HTML en una página, además podría tener variaciones en el rendimiento, lo que hace que entre más se agrande el árbol DOM, será más complicado que el navegador pueda volver a calcular los estilos con el cambio.

Con la herramienta 3D se puede lograr llegar a estos errores, se debe seleccionar la pestaña DOM en la herramienta Vista 3D, allí se podrá observar el árbol DOM en 3D y así ver donde se puede encontrar los envoltorios que generan el error.

Otras veces, algunos elementos quedan por fuera de la ventana gráfica visible que tiene el navegador, por error involuntario o porque quería cambiarlo en la página después y encontrarlo en DevTools no es tan fácil

Cuando ocurre estos errores, no es tan fácil, ya que las ayudas normales no estarán disponibles como, el selector de elementos o el clic derecho para inspeccionar, además la búsqueda en el panel de elementos no es sencilla

Con la herramienta de Vista 3D se puede realizar esta función de manera más rápida, con la pestaña DOM se brinda una vista general de toda la página web y permite desplazarse por todo el contenido para buscar los elementos que pueden estar fuera de la ventana gráfica, para localizarlos deberá hacer clic en alguno de ellos para ir a la herramienta elementos.

Así también se puede depurar barras de desplazamiento no deseadas, ya que es uno de los problemas más comunes cuando se trabaja con CSS, ya que a veces aparecen barras de desplazamiento sin quererlo, por esto es importante ver qué elementos se están desbordando y para esto tenemos la herramienta de 3D, cuando se realiza el desplazamiento se puede ver los elementos que sobresalen del contenedor y crean estas barras de desplazamiento.

Para los problemas de apilamiento de índice z, la herramienta Vista 3D tiene una pestaña de índice z, lo que hace que sea más sencilla la búsqueda, además de poder ver como se apilan los elementos a lo largo del eje del índice z.

Una de las mejoras es que se introdujo una pestaña llamada capas compuestas, que hace que la página web se divida en las capas correctas, lo que hace tener un mejor rendimiento cuando estas se encuentran animadas o son independientes de las otras.

Si queremos pasar de HTML o CSS a píxeles en una pantalla, debe seguir los siguientes pasos

• Verifique el código HTML y genere el árbol DOM de la página.
• Analice el código CSS para obtener la información de estilo y diseño de la página.
• Debe crear una nueva estructura de árbol donde este la descripción del diseño de la página
• Para finalizar, pinte la página usando la información de diseño y estilo

En este último paso, se puede realizar la pintada de página en una sola o dividirla por capas, con las propiedades CSS y elementos HTML que hacen que el motor decida crear una capa separada.

Para los desarrolladores el crear una capa para el tema de la animación es una de las facilidades de la herramienta, sin embargo, hay que tener en cuenta que no se estén creando demasiadas capas ya que esto hace que consuma memoria.

Esta herramienta de Microsoft Edge esta en constante renovación buscando mejorar los temas para quienes quieren manejar de esta manera la creación de páginas web