Side-omrideren gengiver den komplette DOM-struktur af enhver webside som et visuelt træ-overlay — direkte på selve siden. Hvert HTML-element får en farvet etiket, der viser dets tag-navn, og indlejringsdybden afsløres gennem indrykning og forbindelseslinjer. Det er som at se elementpanelet i DevTools, men projiceret direkte onto den aktive side.
Browser-DevTools viser DOM'et som et teksttræ i et sidepanel, adskilt fra det visuelle layout. Side-omrideren bygger bro over dette hul ved at projicere DOM-strukturen direkte på siden. Hvert element får en lille farvet badge, der viser dets tag-navn (div, section, nav, h1, p, button osv.), placeret ved elementets øverste venstre hjørne. Indlejrede elementer er visuelt indrykket, og træstrukturen er umiddelbart tydelig. Det gør det utrolig nemt at forstå, hvordan en side er bygget ved et øjekast — du kan se, at headeren indeholder en nav med fem ankertags, at hovedindholdet har tre sektionselementer, der hver indeholder artikler, og at footeren indeholder en logo-div og en liste med links. Alt uden at åbne DevTools eller læse rå HTML-kildekode.
Hvert synligt element på siden får et farvet tag-badge-overlay, der viser dets HTML-tag-navn. Fra de yderste html- og body-elementer helt ned til individuelle spans, links og knapper — intet er skjult. Overlayet gengiver det komplette elementhierarki som et visuelt kort.
Hvert elementtype får en bestemt baggrundsfarve for sin badge. Strukturelle elementer (header, main, footer) i blå, navigation i rav, overskrifter i lilla, afsnit i grå, links i gul, knapper i cyan, billeder i lyserød. Du kan identificere elementtyper efter farve uden at læse teksten.
Hold markøren over en tag-badge for at fremhæve det tilsvarende element med et halvgennemsigtigt overlay, der viser dets nøjagtige dimensioner (bredde × højde i pixels). Elementgrænsen omrises, og badgen bliver mere fremtrædende — hvilket gør det nemt at identificere, hvilken badge der tilhører hvilket element.
Dybt indlejrede elementer er indrykket længere fra venstrekanten, hvilket gør indlejringsrelationer umiddelbart synlige. Se ved et øjekast, om en side har for mange indpaknings-divs (5+ niveauer dybt) eller en ren, flad struktur. Forbindelseslinjer viser forælder-barn-relationer.
Overlays er placeret absolut og påvirker ikke sidelayout, rulning eller JavaScript-adfærd. Badge-etiketter er små og halvgennemsigtige, så du stadig kan se sideindholdet underneath. Slå øjeblikkeligt fra for at vende tilbage til normalt.
Klik på en containerbadjge for at skjule dens underordnede og skjule de indlejrede badges. Nyttigt til at fokusere på en bestemt sektion uden at blive overvældet af hele sidens DOM-træ. Klik igen for at udvide.
Landet på en kompleks webside og har brug for at forstå, hvordan den er bygget? Side-omrideren viser dig hele DOM-hierarkiet ved et øjekast — hvilke sektioner der indeholder hvilket indhold, hvordan navigationen er struktureret, og hvor hovedindholdsområdet begynder og slutter.
Overdreven div-indlejring gør CSS sværere at skrive og sider langsommere at gengive. Hvis du ser 6+ niveauer af farvede badges stablet oven på hinanden for en simpel tekstblok, kræver opmærkningen forenkling. Side-omrideren gør dette umiddelbart indlysende.
Bruger siden ordentlige semantiske elementer? Kig efter header-, nav-, main-, article-, section- og footer-badges. Hvis alt bare er div-elementer, mangler siden semantisk struktur — hvilket skader tilgængelighed, SEO og vedligeholdbarhed.
Besøg et velbygget websted (Stripe, Linear, Vercel) og aktivér Side-omrideren for at se, hvordan deres frontend-teams strukturerer deres HTML. Lær layoutmønstre ved at se virkelige DOM-strukturer på produktionssider.
Brug Side-omrideren først til at identificere, hvilke elementer der findes og hvor de er, skift derefter til CSS-inspektor eller Mål afstand for at grave dybere ned i specifikke identificerede elementer.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Side-omrider. Værktøjet scanner øjeblikkeligt sidens DOM og gengiver tag-badges på hvert synligt element.
Farvede badges vises i øverste venstre hjørne af hvert element og viser dets tag-navn (div, section, h1, p osv.). Indlejringsstrukturen er synlig gennem indrykning og badge-placering.
Flyt musen over en badge for at fremhæve det tilsvarende element. Et halvgennemsigtigt overlay viser elementets grænser og dimensioner. Dette forbinder det abstrakte tag-navn til dets visuelle position på siden.
Klik på en containerbadge for at skjule dens underordnede badges. Dette lader dig fokusere på specifikke sideområder uden visuel rod fra dybt indlejrede elementer.
Klik på ikonet Side-omrider i docken for at fjerne alle overlays og vende tilbage til den normale sidevisning. Ingen spor efterlades.
Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.
