Ich verbringe viel Zeit in den DevTools, und ich bin sicher, Sie auch. Manchmal wechsle ich sogar zwischen ihnen hin und her, besonders wenn ich plattformübergreifende Probleme debugge. DevTools sind den Browsern selbst sehr ähnlich – nicht alle Funktionen in den DevTools eines Browsers sind in den DevTools eines anderen Browsers gleich oder werden dort unterstützt.
Aber es gibt einige plattformübergreifende DevTools-Funktionen, sogar einige weniger bekannte, die ich Ihnen jetzt vorstellen werde.
Der Kürze halber verwende ich in diesem Artikel "Chromium", um alle Chromium-basierten Browser wie Chrome, Edge und Opera zu bezeichnen. Viele der DevTools darin bieten exakt die gleichen Funktionen und Möglichkeiten wie die anderen, daher ist dies nur meine Kurzform, um sie alle gleichzeitig zu bezeichnen.
Knoten im DOM-Baum suchen
Manchmal ist der DOM-Baum voller Knoten, die in Knoten verschachtelt sind, die in andere Knoten verschachtelt sind und so weiter. Das macht es ziemlich schwierig, genau den zu finden, den Sie suchen, aber Sie können den DOM-Baum schnell mit Cmd + F (macOS) oder Ctrl + F (Windows) durchsuchen.
Zusätzlich können Sie auch mit einem gültigen CSS-Selektor, wie z. B. .red, oder mit einem XPath, wie z. B. //div/h1, suchen.
In Chromium-Browsern springt der Fokus automatisch zum Knoten, der den Suchkriterien entspricht, während Sie tippen. Das kann störend sein, wenn Sie mit längeren Suchanfragen oder einem großen DOM-Baum arbeiten. Glücklicherweise können Sie dieses Verhalten deaktivieren, indem Sie zu Einstellungen (F1) → Voreinstellungen → Global → Während der Eingabe suchen → Deaktivieren gehen.
Nachdem Sie den Knoten im DOM-Baum gefunden haben, können Sie die Seite scrollen, um den Knoten in den Ansichtsbereich zu bringen, indem Sie mit der rechten Maustaste auf den Knoten klicken und "In Ansicht scrollen" auswählen.
Auf Knoten von der Konsole aus zugreifen
DevTools bietet viele verschiedene Möglichkeiten, direkt von der Konsole aus auf einen DOM-Knoten zuzugreifen.
Zum Beispiel können Sie $0 verwenden, um auf den aktuell ausgewählten Knoten im DOM-Baum zuzugreifen. Chromium-Browser gehen noch einen Schritt weiter und ermöglichen es Ihnen, auf Knoten zuzugreifen, die in umgekehrter chronologischer Reihenfolge der historischen Auswahl ausgewählt wurden, mit $1, $2, $3 usw.
Eine weitere Funktion von Chromium-Browsern ist die Möglichkeit, den Knotenpfad als JavaScript-Ausdruck in Form von document.querySelector zu kopieren. Dies geschieht durch Rechtsklick auf den Knoten und Auswahl von **Kopieren** → **JS-Pfad kopieren**, der dann zum Zugriff auf den Knoten in der Konsole verwendet werden kann.
Hier ist eine weitere Möglichkeit, direkt von der Konsole auf einen DOM-Knoten zuzugreifen: als temporäre Variable. Diese Option ist verfügbar, indem Sie mit der rechten Maustaste auf den Knoten klicken und eine Option auswählen. Diese Option ist in den DevTools jedes Browsers unterschiedlich bezeichnet.
- Chromium: Rechtsklick → "Als globale Variable speichern"
- Firefox: Rechtsklick → "In Konsole verwenden"
- Safari: Rechtsklick → "Element protokollieren"
Elemente mit Badges visualisieren
DevTools können helfen, Elemente zu visualisieren, die bestimmten Eigenschaften entsprechen, indem neben dem Knoten ein Badge angezeigt wird. Badges sind klickbar, und verschiedene Browser bieten eine Vielzahl unterschiedlicher Badges.
In Safari gibt es eine Badge-Schaltfläche in der Symbolleiste des Elements-Panels, mit der die Sichtbarkeit bestimmter Badges umgeschaltet werden kann. Wenn beispielsweise ein Knoten eine CSS-Deklaration display: grid oder display: inline-grid hat, wird daneben ein grid-Badge angezeigt. Ein Klick auf das Badge hebt Rasterbereiche, Spaltengrößen, Zeilennummern und mehr auf der Seite hervor.
Die aktuell in den DevTools von Firefox unterstützten Badges sind in den Quellcode-Dokumenten von Firefox aufgeführt. Ein scroll-Badge kennzeichnet beispielsweise ein scrollbares Element. Ein Klick auf das Badge hebt das Element hervor, das den Überlauf verursacht, mit einem overflow-Badge daneben.
In Chromium-Browsern können Sie mit der rechten Maustaste auf einen beliebigen Knoten klicken und "Badge-Einstellungen..." auswählen, um einen Container zu öffnen, der alle verfügbaren Badges auflistet. Elemente mit scroll-snap-type haben beispielsweise ein scroll-snap-Badge daneben, das bei einem Klick die scroll-snap-Überlagerung auf diesem Element umschaltet.
Screenshots machen
Wir können schon seit einiger Zeit Screenshots mit einigen DevTools machen, aber jetzt ist dies in allen verfügbar und bietet neue Möglichkeiten, vollständige Seitenaufnahmen zu machen.
Der Vorgang beginnt mit einem Rechtsklick auf den DOM-Knoten, den Sie erfassen möchten. Wählen Sie dann die Option zum Erfassen des Knotens, deren Bezeichnung je nach verwendetem DevTool variiert.
Wiederholen Sie die gleichen Schritte für den html-Knoten, um einen vollständigen Seiten-Screenshot zu machen. Beachten Sie jedoch, dass Safari die Transparenz der Hintergrundfarbe des Elements beibehält – Chromium und Firefox erfassen sie als weißen Hintergrund.
Es gibt noch eine weitere Option! Sie können einen "responsiven" Screenshot der Seite machen, mit dem Sie die Seite in einer bestimmten Viewport-Breite erfassen können. Wie Sie vielleicht erwarten, hat jeder Browser andere Wege, dorthin zu gelangen.
- Chromium:
Cmd+Shift+M(macOS) oderCtrl+Shift+M(Windows). Oder klicken Sie auf das Symbol "Geräte" neben dem Symbol "Inspizieren". - Firefox: Extras → Browser-Tools → "Responsive Design-Modus"
- Safari: Entwickeln → "Responsive Design-Modus aktivieren"
Chrome-Tipp: Inspect the top layer
Chrome ermöglicht es Ihnen, Top-Layer-Elemente wie Dialoge, Alerts oder Modals zu visualisieren und zu inspizieren. Wenn ein Element zum #top-layer hinzugefügt wird, erhält es ein top-layer-Badge daneben. Ein Klick darauf springt Sie zum Top-Layer-Container, der sich direkt nach dem </html>-Tag befindet.
Die Reihenfolge der Elemente im top-layer-Container folgt der Stapelreihenfolge, was bedeutet, dass das letzte Element oben liegt. Klicken Sie auf das reveal-Badge, um zum Knoten zurückzuspringen.
Firefox-Tipp: Jump to ID
Firefox verknüpft das Element, das das ID-Attribut referenziert, mit seinem Ziel-Element im selben DOM und hebt es mit einer Unterstreichung hervor. Verwenden Sie CMD + Klick (macOS) oder CTRL + Klick (Windows), um zum Ziel-Element mit dem Bezeichner zu springen.
Zusammenfassung
Ziemlich viele Dinge, oder? Es ist fantastisch, dass es einige unglaublich nützliche DevTools-Funktionen gibt, die sowohl in Chromium, Firefox als auch Safari unterstützt werden. Gibt es weitere weniger bekannte Funktionen, die von allen dreien unterstützt werden und die Sie mögen?
Es gibt ein paar Ressourcen, die ich griffbereit halte, um auf dem Laufenden zu bleiben. Ich dachte, ich teile sie hier mit Ihnen
- DevTools Tips (Patrick Brosset): Eine kuratierte Sammlung hilfreicher plattformübergreifender DevTools-Tipps und Tricks.
- Dev Tips (Umar Hansa): DevTools-Tipps, die direkt in Ihren Posteingang gesendet werden!
- Can I DevTools?: Das Caniuse für DevTools.
Ich hatte auch das DOM-Problem auf meiner PHP-Seite, und erhielt eine große DOM-Größe in PageSpeed Insights, also habe ich es zu WP umgestellt.
Hallo Pankaj!
Zunächst einmal herzlichen Glückwunsch zu diesem tiefen Einblick in die Welt der DevTools! Als Online-Marketing-Agentur sind wir ständig in den Gräben und versuchen, die Websites unserer Kunden zu optimieren, und Ihre Einblicke sind eine absolute Goldgrube. Wer hätte gedacht, dass die Navigation durch die komplexe Welt der DOM-Bäume so einfach gemacht werden kann? Ihre Tipps zur Suche nach Knoten im DOM-Baum sind bereits für die nächste Fehlersitzung unseres Teams markiert!
Es ist faszinierend, wie etwas so Allgegenwärtiges wie DevTools immer noch so viele weniger bekannte Juwelen bereithalten kann. Diese Badges zur Visualisierung von Elementen? Ein absoluter Game-Changer! Und obwohl wir schon seit einiger Zeit Screenshots in DevTools verwenden, sind die Einblicke in die Erfassung vollständiger Seitenaufnahmen in verschiedenen Browsern und die Nuancen in jedem einzelnen super hilfreich.
Ihr Abschluss, insbesondere die von Ihnen geteilten Ressourcen, ist wie die Kirsche auf einem bereits köstlichen Kuchen. Wir werden uns definitiv für die DevTips von Umar Hansa anmelden.
Vielen Dank, dass Sie vielen von uns den Weg erhellt haben, Pankaj. Ihre Leidenschaft und Ihr Engagement für das Teilen von Wissen strahlen wirklich in diesem Artikel durch. Ich kann es kaum erwarten zu sehen, was Sie als Nächstes enthüllen werden!
Warme Wünsche,
Šukri
Wow, die Screenshot-Funktion, die habe ich nie bemerkt
Vielen Dank für diesen Artikel!
Ich habe auch ein DOM-Größenproblem auf meiner WP-Website. Wenn Sie mehr Inhalt und Bilder haben, wird dieses Problem irgendwann auftreten. Den Inhalt kann ich nicht reduzieren, da dies das Ranking beeinträchtigen kann. Weitere Vorschläge zur Lösung des Problems sind willkommen.