L'Esquema de pàgina renderitza l'estructura DOM completa de qualsevol pàgina web com una superposició d'arbre visual — directament a la pròpia pàgina. Cada element HTML rep una etiqueta de color que mostra el seu nom d'etiqueta, i la profunditat de niuament es revela mitjançant el sagnat i les línies de connexió. És com veure el panell d'Elements de les DevTools, però projectat sobre la pàgina en viu.
Les DevTools del navegador mostren el DOM com un arbre de text en un panell lateral, desconnectat del disseny visual. L'Esquema de pàgina tanca aquesta bretxa projectant l'estructura DOM directament a la pàgina. Cada element rep una petita insígnia de color que mostra el seu nom d'etiqueta (div, section, nav, h1, p, button, etc.), situada a la cantonada superior esquerra de l'element. Els elements niuats estan sagnats visualment i l'estructura tipus arbre és evident immediatament. Això fa que sigui increïblement fàcil d'entendre com es construeix una pàgina d'un cop d'ull — pots veure que la capçalera conté una navegació amb cinc etiquetes d'ancoratge, el contingut principal té tres elements de secció que contenen cadascun articles i el peu de pàgina envolta un div de logotip i una llista d'enllaços. Tot sense obrir les DevTools ni llegir el codi font HTML rústic.
Cada element visible de la pàgina rep una superposició d'insígnia d'etiqueta de color que mostra el seu nom d'etiqueta HTML. Des dels elements html i body més externs fins als spans, enllaços i botons individuals — no s'amaga res. La superposició renderitza la jerarquia completa d'elements com un mapa visual.
Cada tipus d'element rep un color de fons diferent per a la seva insígnia. Elements estructurals (capçalera, principal, peu de pàgina) en blau, navegació en àmbar, encapçalaments en lila, paràgrafs en gris, enllaços en groc, botons en cian, imatges en rosa. Pots identificar els tipus d'elements per color sense llegir el text.
Passa el ratolí per sobre de qualsevol insígnia d'etiqueta per ressaltar l'element corresponent amb una superposició semitransparent que mostra les seves dimensions exactes (amplada × alçada en píxels). El límit de l'element es perfila i la insígnia es torna més prominent — facilitant la identificació de quina insígnia pertany a cada element.
Els elements profundament niuats estan sagnats més des del marge esquerre, fent que les relacions de niuament siguin visibles immediatament. Mira d'un cop d'ull si una pàgina té massa divs contenidors (més de 5 nivells de profunditat) o una estructura neta i poc profunda. Les línies de connexió mostren les relacions pare-fill.
Les superposicions es posicionen de forma absoluta i no afecten el disseny de la pàgina, el desplaçament o el comportament de JavaScript. Les etiquetes de les insígnies són petites i semitransparents perquè puguis continuar veient el contingut de la pàgina a sota. Desactiva-ho a l'instant per tornar a la normalitat.
Fes clic a la insígnia de qualsevol element contenidor per col·lapsar els seus fills, amagant les insígnies niuades. Útil per centrar-se en una secció específica sense ser aclaparat per tot l'arbre DOM de la pàgina. Fes clic de nou per expandir.
Has arribat a una pàgina web complexa i necessites entendre com està construïda? L'Esquema de pàgina et mostra tota la jerarquia DOM d'un cop d'ull — quines seccions contenen cada contingut, com està estructurada la navegació i on comença i acaba l'àrea de contingut principal.
El niuament excessiu de divs fa que el CSS sigui més difícil d'escriure i que les pàgines triguin més a carregar. Si veus més de 6 nivells d'insígnies de colors apilades unes sobre les altres per a un bloc de text simple, el marcatge necessita simplificació. L'Esquema de pàgina ho fa visible immediatament.
Està la pàgina utilitzant els elements semàntics adequats? Busca les insígnies de capçalera (header), navegació (nav), principal (main), article, secció (section) i peu de pàgina (footer). Si tot són només elements div, la pàgina no té estructura semàntica, cosa que perjudica l'accessibilitat, el SEO i el manteniment.
Visita qualsevol lloc web ben construït (Stripe, Linear, Vercel) i activa l'Esquema de pàgina per veure com els seus equips de frontend estructuren l'HTML. Aprèn patrons de disseny veient estructures DOM del món real en pàgines de producció.
Utilitza primer l'Esquema de pàgina per identificar quins elements existeixen i on són, després canvia al CSS Inspector o a Mesura la distància per aprofundir en elements específics que hagis identificat.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Esquema de pàgina. L'eina escaneja immediatament el DOM de la pàgina i renderitza insígnies d'etiquetes a cada element visible.
Apareixen insígnies de colors a la cantonada superior esquerra de cada element mostrant el seu nom d'etiqueta (div, section, h1, p, etc.). L'estructura de niuament és visible mitjançant el sagnat i el posicionament de les insígnies.
Mou el ratolí sobre qualsevol insígnia per ressaltar l'element corresponent. Una superposició semitransparent mostra els límits i les dimensions de l'element. Això connecta el nom abstracte de l'etiqueta amb la seva posició visual a la pàgina.
Fes clic a una insígnia de contenidor per col·lapsar les insígnies dels seus fills. Això et permet centrar-te en àrees específiques de la pàgina sense el desordre visual dels elements profundament niuats.
Fes clic a la icona de l'Esquema de pàgina al tauler per eliminar totes les superposicions i tornar a la vista normal de la pàgina. No en queda cap rastre.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
