Element löschen/ausblenden lässt Sie jedes Element einer Webseite mit einem einzigen Klick entfernen oder vorübergehend ausblenden. Bereinigen Sie Seiten für Screenshots, entfernen Sie ablenkende Werbung und Cookie-Banner oder testen Sie, wie ein Layout ohne bestimmte Abschnitte aussieht — alles nicht-destruktiv.
Ob Sie einen sauberen Screenshot für ein Portfolio machen, testen, wie ein Seitenlayout umfließt, wenn ein Abschnitt entfernt wird, oder einfach lästige Popup-Overlays ausblenden, damit Sie den darunterliegenden Inhalt lesen können — Element löschen/ausblenden ist das Werkzeug. Es bietet zwei Modi: Löschen (entfernt das Element vollständig aus dem DOM, sodass umliegender Inhalt in den Raum umfließt) und Ausblenden (setzt die Sichtbarkeit auf versteckt und bewahrt den Raum des Elements im Layout). Beide Operationen sind mit Rückgängig umkehrbar. Eine rote Hover-Überlagerung zeigt genau, welches Element betroffen sein wird, bevor Sie klicken, sodass kein Raten nötig ist. Das Tool führt eine laufende Zählung gelöschter und ausgeblendeter Elemente und Sie können sie einzeln oder alle auf einmal rückgängig machen. Wie alle DevSuite-Tools sind Änderungen nicht-destruktiv — aktualisieren Sie die Seite und alles kommt zurück.
Im Lösch-Modus klicken Sie auf ein beliebiges Element, um es vollständig von der Seite zu entfernen. Das Element wird aus dem DOM entfernt und umliegender Inhalt fließt um, um den Raum zu füllen — genau wie wenn das HTML nicht existieren würde. Ideal um zu sehen, wie eine Seite ohne bestimmte Abschnitte aussieht.
Im Ausblenden-Modus klicken Sie auf ein Element, um es unsichtbar zu machen und dabei seinen Raum im Layout zu behalten. Das Element wird transparent, aber seine Box-Dimensionen bleiben erhalten, sodass das restliche Seitenlayout genau gleich bleibt. Nützlich zum Testen des visuellen Gewichts ohne Layout-Verschiebungen.
Bevor Sie klicken, zeigt das Bewegen der Maus eine rote halbtransparente Überlagerung auf dem betroffenen Element. Diese Vorschau verhindert versehentliches Löschen des falschen Elements — Sie sehen immer genau, was Sie gleich entfernen.
Jede Lösch- und Ausblend-Aktion wird im Rückgängig-Verlauf verfolgt. Klicken Sie auf die Rückgängig-Schaltfläche, um die letzte Aktion umzukehren und das Element zurückzubringen. Sie können mehrere Aktionen nacheinander rückgängig machen, um durch Ihre Änderungen zurückzugehen.
Ein Live-Zähler zeigt, wie viele Elemente Sie in der aktuellen Sitzung gelöscht und wie viele Sie ausgeblendet haben. Auf einen Blick wissen Sie, wie viele Änderungen Sie vorgenommen haben und wie viele Rückgängig-Möglichkeiten verfügbar sind.
Alle Änderungen sind rein visuell und existieren nur im Browser-Speicher. Der tatsächliche Code der Seite wird nie geändert. Aktualisieren Sie die Seite jederzeit, um jedes gelöschte und ausgeblendete Element sofort in seinen ursprünglichen Zustand zurückzusetzen.
Entfernen Sie Cookie-Zustimmungsbanner, Chat-Widgets, Werbepopups, klebende Header und Newsletter-Overlays, bevor Sie Screenshots machen. Erhalten Sie eine saubere, professionelle Aufnahme des Seiteninhalts ohne visuelles Durcheinander.
Fragen Sie sich, wie die Seite ohne den Testimonials-Abschnitt fließt? Oder was passiert, wenn Sie die Seitenleiste entfernen? Löschen Sie den Abschnitt und sehen Sie das Layout sofort umfließen — keine Code-Änderungen nötig.
Auf inhaltsreichen Seiten mit aufdringlicher Werbung blenden Sie die Werbeelemente aus, damit Sie Artikel und Dokumentation ohne Ablenkung lesen können. Der Inhalt fließt um, um den verfügbaren Raum zu füllen.
Bereiten Sie eine Präsentation vor, die eine komplexe Webseite referenziert? Entfernen Sie die Elemente, die für Ihren Punkt nicht relevant sind, und lassen Sie nur die Abschnitte übrig, die Sie besprechen möchten. Dann machen Sie einen Screenshot der vereinfachten Ansicht.
Wenn sich Elemente überlappen oder einander verdecken, löschen Sie das oberste Element, um zu sehen, was darunter ist. Das ist schneller als Z-Index- oder Display-Eigenschaften in DevTools anzupassen, wenn Sie nur einen schnellen Blick auf das Darunter-liegende brauchen.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol Element löschen/ausblenden. Wählen Sie zwischen Lösch-Modus (entfernt Element und lässt Layout umfließen) oder Ausblenden-Modus (macht unsichtbar, bewahrt aber Raum).
Bewegen Sie die Maus über die Seite. Eine rote halbtransparente Überlagerung hebt das Element unter Ihrem Cursor hervor und zeigt genau, was beim Klicken betroffen sein wird.
Klicken Sie auf das hervorgehobene Element. Im Lösch-Modus wird es entfernt und umliegender Inhalt fließt um. Im Ausblenden-Modus wird es unsichtbar, aber sein Raum bleibt erhalten.
Klicken Sie weiter, um mehr Elemente zu entfernen, oder klicken Sie auf Rückgängig, um das zuletzt entfernte/ausgeblendete Element zurückzubringen. Der Aktionszähler zeigt Ihre aktuellen Änderungen.
Fertig mit dem Experimentieren? Aktualisieren Sie die Seite, um jedes Element sofort in seinen ursprünglichen Zustand zurückzusetzen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
