Delete/Hide Element laat je elk element op een webpagina met één klik verwijderen of tijdelijk verbergen. Schoon pagina's op voor schermafbeeldingen, verwijder afleidende advertenties en cookiebannercombinaties, of test hoe een lay-out er zonder bepaalde secties uitziet — allemaal niet-destructief.
Of je nu een schone schermafbeelding voor een portefeuille maakt, test hoe een pagina-indeling overloopt wanneer een sectie wordt verwijderd, of gewoon irritante pop-upoverlays verbergt zodat je de inhoud eronder kunt lezen — Delete/Hide Element is het gereedschap. Het biedt twee modi: Delete (verwijdert het element volledig uit de DOM, waardoor de omringende inhoud in de ruimte overloopt) en Hide (zet zichtbaarheid verborgen, behoud van de ruimte van het element in de lay-out). Beide bewerkingen kunnen ongedaan worden gemaakt. Een rode hoveroverlay toont precies welk element wordt beïnvloed voordat je klikt, dus er is geen gissen. Het gereedschap houdt een lopend aantal verwijderde en verborgen elementen, en je kunt ze één voor één of allemaal tegelijk ongedaan maken. Net als alle DevSuite-gereedschappen zijn wijzigingen niet-destructief — vernieuw de pagina en alles komt terug.
In Delete-modus klik je op een element om het volledig van de pagina te verwijderen. Het element wordt uit de DOM verwijderd en de omringende inhoud overloopt om de ruimte in te vullen — net alsof de HTML niet bestond. Geweldig om te zien hoe een pagina er zonder bepaalde secties uitziet.
In Hide-modus klik je op een element om het onzichtbaar te maken terwijl je de ruimte in de lay-out behoudt. Het element wordt transparant maar de afmetingen van het vak blijven behouden, dus de rest van de pagina-indeling blijft precies hetzelfde. Handig voor het testen van visueel gewicht zonder lay-outwijzigingen.
Voordat je klikt, toont het verplaatsen van de muis een rood semi-transparante overlay op het element dat wordt beïnvloed. Dit voorbeeld voorkomt onbedoeld verwijderen van het verkeerde element — je ziet altijd precies wat je op het punt staat te verwijderen.
Elke verwijderings- en verbergingsactie wordt bijgehouden in een ongedaan-makengeschiedenis. Klik op de knop Ongedaan maken om de laatste actie ongedaan te maken en het element terug te brengen. Je kunt meerdere acties achtereenvolgens ongedaan maken om achterwaarts door je wijzigingen te stappen.
Een live teller toont hoeveel elementen je hebt verwijderd en hoeveel je in de huidige sessie hebt verborgen. In één oogopslag weet je hoeveel wijzigingen je hebt aangebracht en hoeveel undos beschikbaar zijn.
Alle wijzigingen zijn zuiver visueel en bestaan alleen in browsergeheugen. De werkelijke code van de pagina wordt nooit gewijzigd. Vernieuw de pagina op elk moment om elk verwijderd en verborgen element onmiddellijk in de oorspronkelijke staat terug te stellen.
Verwijder cookie-instemminningsbannercombinaties, chatwidgets, promotionele pop-ups, vaste kopteksten en nieuwsbriefoverlays voordat je schermafbeeldingen maakt. Krijg een schone, professionele vastlegging van de pagina-inhoud zonder visuele warboel.
Vraag je af hoe de pagina stroomt zonder de getuigenissenissenissectie? Of wat gebeurt er als je de zijbalk verwijdert? Verwijder de sectie en zie de lay-out onmiddellijk overloopt — geen codewijzigingen nodig.
Op inhoudsrijke pagina's met indringende advertenties verberg je de advertentie-elementen zodat je artikelen en documentatie zonder afleiding kunt lezen. De inhoud overloopt om de beschikbare ruimte in te vullen.
Een presentatie voorbereiding die naar een complexe webpagina verwijst? Verwijder de elementen die niet relevant zijn voor je punt, laat alleen de secties over die je wilt bespreken. Maak vervolgens een schermafbeelding van de vereenvoudigde weergave.
Als elementen overlappen of elkaar verduisteren, verwijder je het bovenste element om te zien wat eronder zit. Dit is sneller dan z-index of weergaveeigenschappen in DevTools aan te passen wanneer je alleen maar een snelle blik nodig hebt.
Open het DevSuite Pro zwevende dock en klik op het pictogram Element verwijderen/verbergen. Kies tussen Delete-modus (verwijdert element en herschikt lay-out) of Hide-modus (maakt onzichtbaar maar bewaart ruimte).
Beweeg je muis over de pagina. Een rood semi-transparante overlay markeert het element onder je cursor en toont precies wat wordt beïnvloed wanneer je klikt.
Klik op het gemarkeerde element. In Delete-modus wordt het verwijderd en de omringende inhoud overloopt. In Hide-modus wordt het onzichtbaar maar de ruimte ervan wordt behouden.
Ga door met klikken om meer elementen te verwijderen, of klik Ongedaan maken om het laatst verwijderde/verborgen element terug te brengen. De actiemeter toont je huidige wijzigingen.
Klaar met experimenteren? Vernieuw de pagina om elk element onmiddellijk in de oorspronkelijke staat terug te stellen.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
