Page Outliner affiche la structure DOM complète de toute page web sous forme de superposition arborescente visuelle — directement sur la page elle-même. Chaque élément HTML reçoit une étiquette colorée indiquant son nom de balise, et la profondeur d'imbrication est révélée par l'indentation et les lignes de connexion. C'est comme visualiser le panneau Éléments de DevTools, mais projeté directement sur la page en direct.
Les DevTools du navigateur affichent le DOM sous forme d'arborescence textuelle dans un panneau latéral, déconnecté de la mise en page visuelle. Page Outliner comble cet écart en projetant la structure DOM directement sur la page. Chaque élément reçoit un petit badge coloré indiquant son nom de balise (div, section, nav, h1, p, button, etc.), positionné dans le coin supérieur gauche de l'élément. Les éléments imbriqués sont visuellement indentés, et la structure arborescente est immédiatement apparente. Il devient ainsi incroyablement facile de comprendre comment une page est construite d'un seul coup d'œil — vous pouvez voir que le header contient un nav avec cinq balises d'ancre, que le contenu principal comporte trois éléments section contenant chacun des articles, et que le footer englobe un div logo et une liste de liens. Tout cela sans ouvrir DevTools ni lire le code source HTML brut.
Chaque élément visible de la page reçoit une superposition de badge coloré indiquant son nom de balise HTML. Des éléments html et body les plus externes jusqu'aux spans, liens et boutons individuels — rien n'est caché. La superposition restitue la hiérarchie complète des éléments sous forme de carte visuelle.
Chaque type d'élément reçoit une couleur de fond distincte pour son badge. Les éléments structurels (header, main, footer) en bleu, la navigation en ambre, les titres en violet, les paragraphes en gris, les liens en jaune, les boutons en cyan, les images en rose. Vous pouvez identifier les types d'éléments par leur couleur sans lire le texte.
Survolez n'importe quel badge de balise pour mettre en évidence l'élément correspondant avec une superposition semi-transparente affichant ses dimensions exactes (largeur × hauteur en pixels). La bordure de l'élément est tracée et le badge devient plus visible — facilitant l'identification du badge correspondant à chaque élément.
Les éléments profondément imbriqués sont davantage indentés depuis le bord gauche, rendant les relations d'imbrication immédiatement visibles. Repérez d'un coup d'œil si une page contient trop de div enveloppants (5+ niveaux) ou une structure propre et peu profonde. Les lignes de connexion indiquent les relations parent-enfant.
Les superpositions sont positionnées en absolu et n'affectent pas la mise en page, le défilement ou le comportement JavaScript de la page. Les étiquettes de badge sont petites et semi-transparentes afin que vous puissiez toujours voir le contenu de la page en dessous. Désactivez instantanément pour revenir à l'affichage normal.
Cliquez sur le badge d'un élément conteneur pour réduire ses enfants et masquer les badges imbriqués. Utile pour se concentrer sur une section spécifique sans être submergé par l'arborescence DOM complète de la page. Cliquez à nouveau pour développer.
Vous avez atterri sur une page web complexe et avez besoin de comprendre comment elle est construite ? Page Outliner vous montre l'intégralité de la hiérarchie DOM d'un coup d'œil — quelles sections contiennent quel contenu, comment la navigation est structurée, et où commence et se termine la zone de contenu principal.
Une imbrication excessive de div rend le CSS plus difficile à écrire et les pages plus lentes à afficher. Si vous voyez 6+ niveaux de badges colorés superposés pour un simple bloc de texte, le balisage nécessite une simplification. Page Outliner rend cela immédiatement évident.
La page utilise-t-elle des éléments sémantiques appropriés ? Recherchez les badges header, nav, main, article, section et footer. Si tout n'est que des éléments div, la page manque de structure sémantique — ce qui nuit à l'accessibilité, au référencement SEO et à la maintenabilité.
Visitez n'importe quel site bien construit (Stripe, Linear, Vercel) et activez Page Outliner pour voir comment leurs équipes front-end structurent leur HTML. Apprenez les schémas de mise en page en observant des structures DOM réelles sur des pages en production.
Utilisez d'abord Page Outliner pour identifier quels éléments existent et où ils se trouvent, puis passez à CSS Inspector ou Measure Distance pour approfondir l'analyse des éléments spécifiques que vous avez identifiés.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Page Outliner. L'outil analyse immédiatement le DOM de la page et affiche les badges de balises sur chaque élément visible.
Les badges colorés apparaissent dans le coin supérieur gauche de chaque élément, indiquant son nom de balise (div, section, h1, p, etc.). La structure d'imbrication est visible grâce à l'indentation et au positionnement des badges.
Déplacez votre souris sur n'importe quel badge pour mettre en évidence l'élément correspondant. Une superposition semi-transparente affiche les limites et les dimensions de l'élément. Cela relie le nom de balise abstrait à sa position visuelle sur la page.
Cliquez sur le badge d'un conteneur pour réduire les badges de ses enfants. Cela vous permet de vous concentrer sur des zones spécifiques de la page sans encombrement visuel provenant des éléments profondément imbriqués.
Cliquez sur l'icône Page Outliner dans le dock pour supprimer toutes les superpositions et revenir à la vue normale de la page. Aucune trace laissée derrière.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
