← Terug naar functies
Free

Omtrekmodus

Voegt kleurgecodeerde omtrekranden toe aan elk HTML-element voor een röntgenweergave van de structuur.

De Omtrekmodus tekent gekleurde randen rond elk element tegelijkertijd — het volledige beeld in één keer.

Live voorvertoning
example.com/landing-page Omlijningsmodus: AAN
Logo
Home
Over ons
Contact
Welkom op onze site
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna.
Aan de slag
Meer informatie
body header nav main h1 p button
Belangrijkste kenmerken

Activering met één klik

Schakel omtrekken in/uit met één klik.

Kleurcodering per elementtype

Headers blauw, navigatie geel, hoofdinhoud groen, koppen paars.

Debug spatiëring en overflow

Omtrekken maken onzichtbare CSS-problemen zichtbaar.

Volledige nestinghiërarchie

Geneste omtrekken onthullen de ouder-kindstructuur.

Werkt op elke website

Via CSS-injectie zonder DOM-wijzigingen.

Geen invloed op layout

Gebruikt CSS outline (niet border) — geen box model-wijzigingen.

Wat u kunt inspecteren

Omtrekmodus covers the following, organized by category:

Structurele elementen

  • html
  • body
  • header
  • footer
  • main
  • section
  • article
  • aside
  • nav

Inhoudselementen

  • h1–h6 headings
  • p paragraphs
  • span
  • a links
  • blockquote
  • pre
  • code

Interactieve elementen

  • button
  • input
  • textarea
  • select
  • form
  • label

Layoutcontainers

  • div
  • ul / ol / li
  • table / tr / td
  • figure
  • details
Veelvoorkomende scenario's

Onverwachte witruimte debuggen

Schakel omtrekken in en zie direct de oorzaak.

Responsieve layouts controleren

Verklein het venster met omtrekken aan.

DOM-structuur auditen

Te veel geneste divs? Omtrekmodus maakt het zichtbaar.

Designs vergelijken tussen paginas

Vergelijk structuren op verschillende paginas.

HTML/CSS-concepten onderwijzen

Toon studenten hoe elementen boxen creëren.

Hoe te gebruiken
1

Activeer

Klik op het pictogram in de dock.

2

Lees de kleurcodering

Elk elementtype heeft een eigen kleur.

3

Identificeer problemen

Zoek naar onverwachte gaten en overflow.

4

Combineer met andere tools

Gebruik als startpunt, schakel dan naar CSS Inspecteur.

5

Schakel uit

Klik opnieuw om omtrekken te verwijderen.

Klaar om te proberen?

Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox