El Esquematizador de Página renderiza la estructura DOM completa de cualquier página web como una superposición de árbol visual — directamente en la propia página. Cada elemento HTML obtiene una etiqueta de color que muestra su nombre de etiqueta, y la profundidad de anidamiento se revela mediante sangría y líneas de conexión. Es como ver el panel de Elementos de DevTools, pero proyectado sobre la página en vivo.
Los DevTools del navegador muestran el DOM como un árbol de texto en un panel lateral, desconectado del diseño visual. El Esquematizador de Página cierra esta brecha proyectando la estructura DOM directamente sobre la página. Cada elemento obtiene un pequeño distintivo de color que muestra su nombre de etiqueta (div, section, nav, h1, p, button, etc.), posicionado en la esquina superior izquierda del elemento. Los elementos anidados se sangran visualmente, y la estructura en forma de árbol es inmediatamente evidente. Esto hace increíblemente fácil entender cómo está construida una página de un vistazo — puedes ver que el header contiene un nav con cinco etiquetas de anclaje, el contenido principal tiene tres elementos section cada uno con artículos, y el footer envuelve un div de logo y una lista de enlaces. Todo sin abrir DevTools ni leer el código fuente HTML sin procesar.
Cada elemento visible de la página obtiene una superposición de distintivo de etiqueta de color que muestra su nombre de etiqueta HTML. Desde los elementos html y body más externos hasta los spans, enlaces y botones individuales — nada está oculto. La superposición renderiza la jerarquía completa de elementos como un mapa visual.
Cada tipo de elemento obtiene un color de fondo distinto para su distintivo. Elementos estructurales (header, main, footer) en azul, navegación en ámbar, encabezados en púrpura, párrafos en gris, enlaces en amarillo, botones en cian, imágenes en rosa. Puedes identificar tipos de elementos por color sin leer el texto.
Pasa el cursor sobre cualquier distintivo de etiqueta para resaltar el elemento correspondiente con una superposición semitransparente que muestra sus dimensiones exactas (ancho × alto en píxeles). El límite del elemento se contornea y el distintivo se vuelve más prominente — facilitando identificar qué distintivo pertenece a qué elemento.
Los elementos profundamente anidados se sangran más desde el borde izquierdo, haciendo las relaciones de anidamiento inmediatamente visibles. Ve de un vistazo si una página tiene demasiados divs envoltorio (5+ niveles de profundidad) o una estructura limpia y superficial. Las líneas de conexión muestran las relaciones padre-hijo.
Las superposiciones están posicionadas de forma absoluta y no afectan el diseño de la página, el desplazamiento ni el comportamiento de JavaScript. Las etiquetas de distintivo son pequeñas y semitransparentes para que puedas seguir viendo el contenido de la página debajo. Desactívalas al instante para volver a la normalidad.
Haz clic en el distintivo de cualquier elemento contenedor para colapsar sus hijos, ocultando los distintivos anidados. Útil para enfocarse en una sección específica sin abrumarse con el árbol DOM de toda la página. Haz clic de nuevo para expandir.
¿Llegaste a una página web compleja y necesitas entender cómo está construida? El Esquematizador de Página te muestra toda la jerarquía DOM de un vistazo — qué secciones contienen qué contenido, cómo está estructurada la navegación, y dónde comienza y termina el área de contenido principal.
El anidamiento excesivo de divs hace que el CSS sea más difícil de escribir y las páginas más lentas de renderizar. Si ves 6+ niveles de distintivos de color apilados uno sobre otro para un bloque de texto simple, el marcado necesita simplificación. El Esquematizador de Página hace esto inmediatamente obvio.
¿La página usa elementos semánticos adecuados? Busca distintivos de header, nav, main, article, section y footer. Si todo son solo elementos div, la página carece de estructura semántica — lo que perjudica la accesibilidad, el SEO y la mantenibilidad.
Visita cualquier sitio web bien construido (Stripe, Linear, Vercel) y activa el Esquematizador de Página para ver cómo sus equipos de frontend estructuran su HTML. Aprende patrones de diseño viendo estructuras DOM del mundo real en páginas de producción.
Usa el Esquematizador de Página primero para identificar qué elementos existen y dónde están, luego cambia al Inspector CSS o Medir Distancia para profundizar en los elementos específicos que has identificado.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Esquematizador de Página. La herramienta escanea inmediatamente el DOM de la página y renderiza distintivos de etiquetas en cada elemento visible.
Los distintivos de color aparecen en la esquina superior izquierda de cada elemento mostrando su nombre de etiqueta (div, section, h1, p, etc.). La estructura de anidamiento es visible a través de la sangría y el posicionamiento de los distintivos.
Mueve el mouse sobre cualquier distintivo para resaltar el elemento correspondiente. Una superposición semitransparente muestra los límites y dimensiones del elemento. Esto conecta el nombre de etiqueta abstracto con su posición visual en la página.
Haz clic en un distintivo contenedor para colapsar los distintivos de sus hijos. Esto te permite enfocarte en áreas específicas de la página sin el desorden visual de los elementos profundamente anidados.
Haz clic en el ícono del Esquematizador de Página en el dock para eliminar todas las superposiciones y volver a la vista normal de la página. Sin rastros restantes.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
