Samenvatting
Soms doet de editor iets onverklaarbaars: een blok lijkt verdwenen, een element is niet aan te klikken, of custom code gedraagt zich raar. De Debug-modus (het kever-icoon in de bovenste toolbar) geeft je precies de gereedschappen om binnen enkele minuten te zien wáár het misgaat — op welk niveau (blok → container → rij → kolom → element) en of het aan code ligt. Dit artikel is de verdieping op het overzicht in Editor interface: welk gereedschap gebruik je wanneer, en hoe redeneer je van symptoom naar oorzaak.
Wanneer gebruik je dit?
- Een blok lijkt verdwenen, maar er is wél lege ruimte.
- Een element is niet aanklikbaar (er ligt iets voor, of een codefout blokkeert het).
- Custom code (HTML/LESS) veroorzaakt onverwacht gedrag.
- Je wilt snel controleren of een blok een codefout bevat.
Gebruik debug niet voor elk klein detail — begin met de zichtbare instelling. Schakel debug in zodra het probleem "dieper" zit of de structuur onduidelijk is. En zet debug daarna weer uit: het is een inspectiestand, geen werkstand.
De gereedschappen in de Debug-modus
Open de Debug-modus via het kever-/debug-icoon in de bovenste toolbar. Het menu bevat onder andere:
- Valideren — controleert alle blokken op fouten in HTML en LESS en markeert de blokken met een fout. Je startpunt bij "custom code doet raar".
- Content uitschakelen — zet de inhoud tijdelijk uit en geeft elk blok een vaste hoogte. Ideaal als een codefout of een laag ervoor zorgt dat je een blok of element niet meer kunt aanklikken: zo kun je het tóch selecteren.
- Toon verborgen blokken / Toon verborgen elementen — maakt onderdelen die (bewust of per ongeluk) verborgen zijn weer zichtbaar in de editor, zodat je ze kunt terugzetten of bewerken.
- Verberg mouseovers — schakelt storende hover-effecten tijdelijk uit, zodat je een onderliggend element kunt selecteren zonder dat een hover-laag ertussen springt. Met Toon mouseovers zet je ze weer aan.
--alert variant:warning title:"Kernregel"--
Los het probleem op op het juiste niveau. Een oorzaak die op rij- of containerniveau zit "repareren" op het element levert bijna altijd een nieuwe bug op. Werk daarom van boven naar beneden: blok → container → rij → kolom → element.
--/alert--
Welk gereedschap bij welk symptoom?
| Symptoom | Gereedschap | Waarom |
|---|---|---|
| Blok lijkt weg, maar er is wél lege ruimte | Toon verborgen blokken | het blok is meestal verborgen, niet verwijderd |
| Element niet aanklikbaar | Content uitschakelen + Verberg mouseovers | haalt de blokkerende laag/overlay weg zodat je kunt selecteren |
| Custom code doet raar | Valideren | markeert precies welk blok een HTML/LESS-fout heeft |
| Onverklaarbaar verschil desktop/mobiel | debug + per device controleren | opmaak kan per schermformaat verschillen |
Waar klik je precies?
- Open de doelpagina in de editor.
- Reproduceer het probleem zonder iets te wijzigen (welk device, welke pagina?).
- Klik op het kever-/debug-icoon in de bovenste toolbar.
- Kies het passende gereedschap (Valideren / Content uitschakelen / Toon verborgen blokken of elementen / Verberg mouseovers).
- Selecteer het probleemonderdeel en lees de structuur terug: blok → container → rij → kolom → element.
- Pas één wijziging toe en sla op.
- Zet Debug-modus uit en controleer het normale gedrag op desktop én mobiel; publiceer als het klopt.
Zie je het kever-icoon niet? Of het beschikbaar is, hangt af van je rol/rechten en de context — zie Editor interface.
Supportflow: symptoom → oorzaak → oplossing
"Een blok lijkt verdwenen, maar er is wél lege ruimte"
Meestal is het blok verborgen, niet verwijderd (of het ligt achter een laag).
- Zet Debug-modus aan en kies Toon verborgen blokken.
- Selecteer de lege zone en controleer of daar een verborgen blok staat; zet de zichtbaarheid terug.
- Staat er niets verborgen? Dan ontstaat de ruimte door de instellingen van de container/rij — controleer die.
"Ik kan een element niet selecteren; er hangt iets overheen"
Een hover-laag of een blok met een codefout vangt je klikken op.
- Kies Verberg mouseovers en/of Content uitschakelen.
- Selecteer nu het juiste element via de structuur en corrigeer het op het juiste niveau.
- Zet daarna de normale interactie terug en test.
"Custom code doet iets onverwachts"
- Kies Valideren: de blokken met een HTML/LESS-fout worden gemarkeerd.
- Open van het gemarkeerde blok de code (zie Code invoegen) en herstel de fout.
- Valideer opnieuw tot er niets meer gemarkeerd staat.
Praktijkvoorbeelden
Voorbeeld 1 — Knop "weg" op mobiel
Situatie: support krijgt de melding dat een call-to-action op mobiel niet zichtbaar is, terwijl desktop goed lijkt.
Aanpak: Debug aan → Toon verborgen elementen → in de structuur blijkt de knop op kolomniveau verborgen te staan op mobiel. Zichtbaarheid teruggezet, gepubliceerd.
Resultaat: de knop verschijnt weer op de juiste plek op mobiel.
Voorbeeld 2 — Tekstblok niet te selecteren
Situatie: een redacteur kan een tekstblok niet selecteren omdat er een decoratieve laag overheen hangt.
Aanpak: Verberg mouseovers + Content uitschakelen → tekstblok direct via de structuur geselecteerd, de laag gecorrigeerd, daarna alles teruggezet en de pagina getest.
Resultaat: het tekstblok is weer normaal bewerkbaar en de laag gedraagt zich correct voor bezoekers.
Veelgemaakte fouten
- Debug te lang aan laten tijdens normaal werk. Zet het alleen aan tijdens diagnose en daarna weer uit.
- Meerdere dingen tegelijk aanpassen zodra je verborgen onderdelen ziet. Doe één wijziging tegelijk en verifieer meteen.
- Diagnose in de verkeerde deviceweergave. Een mobiel probleem oplossen in desktopweergave geeft schijnzekerheid — controleer per device na je fix.