Einige browserübergreifende DevTools-Funktionen, die Sie möglicherweise nicht kennen

Ich verbringe viel Zeit mit DevTools, und Sie sicherlich auch. Manchmal springe ich sogar zwischen ihnen hin und her, besonders wenn ich browserübergreifende Probleme debugge. DevTools ist den Browsern selbst sehr ähnlich – nicht alle Features in den DevTools eines Browsers sind identisch oder werden in den DevTools eines anderen Browsers unterstützt.

Aber es gibt einige DevTools-Features, die interoperabel sind, sogar einige weniger bekannte, die ich gleich mit Ihnen teilen werde.

Der Kürze halber verwende ich „Chromium“, um mich in diesem Artikel auf alle Chromium-basierten Browser wie Chrome, Edge und Opera zu beziehen. Viele der darin enthaltenen DevTools bieten genau die gleichen Features und Fähigkeiten wie die anderen, daher ist dies nur meine Abkürzung, um auf alle gleichzeitig zu verweisen.

Suchknoten im DOM-Baum

Manchmal ist der DOM-Baum voller Knoten, die in Knoten verschachtelt sind, die in anderen Knoten verschachtelt sind, und so weiter. Das macht es ziemlich schwierig, genau das zu finden, wonach Sie suchen, aber Sie können den DOM-Baum schnell mit durchsuchen Cmd + F (macOS) oder Ctrl + F (Windows).

Darüber hinaus können Sie auch mit einem gültigen CSS-Selektor suchen, z .red, oder mit einem XPath, wie //div/h1.

In Chromium-Browsern springt der Fokus während der Eingabe automatisch auf den Knoten, der den Suchkriterien entspricht, was bei längeren Suchanfragen oder einem großen DOM-Baum störend sein kann. Glücklicherweise können Sie dieses Verhalten deaktivieren, indem Sie zu gehen Einstellungen (F1) → Voreinstellungen → Global → Suchen Sie während der Eingabe → Deaktivieren.

Nachdem Sie den Knoten im DOM-Baum gefunden haben, können Sie die Seite scrollen, um den Knoten in das Ansichtsfenster zu bringen, indem Sie mit der rechten Maustaste auf den Knoten klicken und „In Ansicht scrollen“ auswählen.

Greifen Sie über die Konsole auf Knoten zu

DevTools bietet viele verschiedene Möglichkeiten, direkt über die Konsole auf einen DOM-Knoten zuzugreifen.

Zum Beispiel können Sie verwenden $0 um auf den aktuell ausgewählten Knoten im DOM-Baum zuzugreifen. Chromium-Browser gehen noch einen Schritt weiter, indem sie Ihnen den Zugriff auf Knoten ermöglichen, die in umgekehrter chronologischer Reihenfolge der historischen Auswahl ausgewählt wurden, indem Sie Folgendes verwenden: $1, $2, $3, usw.

Eine andere Sache, die Chromium-Browser Ihnen ermöglichen, ist das Kopieren des Knotenpfads als JavaScript-Ausdruck in Form von document.querySelector indem Sie mit der rechten Maustaste auf den Knoten klicken und auswählen Kopieren → Kopieren Sie den JS-Pfad, die dann für den Zugriff auf den Knoten in der Konsole verwendet werden kann.

Hier ist eine weitere Möglichkeit, direkt von der Konsole aus 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 gekennzeichnet:

• Chrom: Rechtsklick → „Als globale Variable speichern“
• Firefox: Rechtsklick → „In Konsole verwenden“
• Safari: Rechtsklick → „Log-Element“

Visualisieren Sie Elemente mit Abzeichen

DevTools kann dabei helfen, Elemente zu visualisieren, die bestimmten Eigenschaften entsprechen, indem ein Badge neben dem Knoten angezeigt wird. Badges sind anklickbar und verschiedene Browser bieten eine Vielzahl unterschiedlicher Badges an.

In Safari, gibt es eine Badge-Schaltfläche in der Symbolleiste des Bedienfelds „Elemente“, mit der die Sichtbarkeit bestimmter Badges umgeschaltet werden kann. Wenn ein Knoten beispielsweise eine hat display: grid or display: inline-grid Darauf angewandte CSS-Deklaration, a grid Abzeichen wird daneben angezeigt. Durch Klicken auf das Abzeichen werden Rasterbereiche, Spurgrößen, Zeilennummern und mehr auf der Seite hervorgehoben.

Die derzeit unterstützten Abzeichen in FirefoxDie DevTools von sind in Firefox aufgeführt Quelldokumente. Zum Beispiel a scroll Abzeichen zeigt ein scrollbares Element an. Durch Klicken auf das Badge wird das Element, das den Überlauf verursacht, mit einem markiert overflow Abzeichen daneben.

In Chrom Browser können Sie mit der rechten Maustaste auf einen beliebigen Knoten klicken und ihn auswählen „Abzeicheneinstellungen…“ , um einen Container zu öffnen, der alle verfügbaren Badges auflistet. Zum Beispiel Elemente mit scroll-snap-type wird eine haben scroll-snap Abzeichen daneben, das beim Klicken umschaltet scroll-snap Overlay auf diesem Element.

Screenshots machen

Wir können seit einiger Zeit Screenshots von einigen devtools machen, aber es ist jetzt in allen verfügbar und enthält neue Möglichkeiten, ganzseitige Aufnahmen zu machen.

Der Prozess beginnt mit einem Rechtsklick auf den DOM-Knoten, den Sie erfassen möchten. Wählen Sie dann die Option zum Erfassen des Knotens aus, der je nach verwendetem devtools unterschiedlich gekennzeichnet ist.

Wiederholen Sie die gleichen Schritte auf der html Knoten, um einen ganzseitigen Screenshot zu machen. Wenn Sie dies tun, ist es jedoch erwähnenswert, dass Safari die Transparenz der Hintergrundfarbe des Elements beibehält – Chromium und Firefox erfassen es als weißen Hintergrund.

Es gibt noch eine andere Möglichkeit! Sie können einen „responsiven“ Screenshot der Seite erstellen, mit dem Sie die Seite mit einer bestimmten Breite des Ansichtsbereichs erfassen können. Wie zu erwarten, hat jeder Browser unterschiedliche Wege, um dorthin zu gelangen.

• Chrom: Cmd + Shift + M (macOS) oder Ctrl + 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“

Chrom-Tipp: Untersuchen Sie die oberste Schicht

Mit Chrome können Sie Elemente der obersten Ebene wie einen Dialog, eine Warnung oder ein Modal visualisieren und überprüfen. Wenn ein Element hinzugefügt wird #top-layer, es wird ein top-layer Abzeichen daneben, das Sie beim Klicken zum Container der obersten Ebene direkt nach dem springt </html> -Tag.

Die Reihenfolge der Elemente in der top-layer Behälter folgt der Stapelreihenfolge, d. h. der letzte befindet sich oben. Drücke den reveal Badge, um zum Knoten zurückzuspringen.

Firefox-Tipp: Zur ID springen

Firefox verknüpft das Element, das auf das ID-Attribut verweist, mit seinem Zielelement im selben DOM und hebt es mit einer Unterstreichung hervor. Verwenden CMD + Click (macOS) oder CTRL + Click (Windows) ), um zum Zielelement mit dem Bezeichner zu springen.

Wrapping up

Ziemlich viele Dinge, oder? Es ist großartig, dass es einige unglaublich nützliche DevTools-Funktionen gibt, die in Chromium, Firefox und Safari gleichermaßen unterstützt werden. Gibt es weitere weniger bekannte Funktionen, die von allen drei unterstützt werden und die Ihnen gefallen?

Es gibt ein paar Ressourcen, die ich in der Nähe halte, um über Neuigkeiten auf dem Laufenden zu bleiben. Ich dachte, ich würde sie hier teilen:

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/