Einige Cross-Browser-Devtools-Funktionen, die Sie vielleicht nicht kennen

Entwicklerwerkzeuge sind eine tägliche Waffe für Front-End-Entwickler.

Der Einfachheit halber wird in dem Artikel "Chromium" verwendet, um auf alle Browser auf Chrombasis wie Chrom, Edge und Oper zu verweisen. Ihre Entwicklerwerkzeuge sind in der Funktionalität sehr konsistent.

DOM -Baumknotensuche

Mit den verschachtelten Dom-Knoten bei Schichten kann es zeitaufwändig und mühsam sein. Verwenden Sie CMD F (MacOS) oder Strg F (Windows), um schnell nach dem DOM -Baum zu suchen.

unterstützt CSS -Selektoren (z. B.

) und XPath -Ausdrücke (z. B. <code>.red). <code>//div/h1

Im Chrom -Browser springen die Suche automatisch zum passenden Knoten, was beim Umgang mit langen Abfragen oder großen DOM -Bäumen problematisch sein kann. Sie können diese Funktion deaktivieren, indem Sie zu

Einstellungen (f1) → Einstellungen → global → Eingeben gehen, während Sie → 🎜> durchsuchen.

Nachdem Sie den Knoten gefunden haben, klicken Sie mit der rechten Maustaste auf den Knoten und wählen Sie "Scrollen Sie zum Anzeigen", um ihn in den Betrachtungsbereich zu scrollen.

Zugriff auf den Knoten von Konsole

Entwicklertools bieten mehrere Möglichkeiten, um direkt über Dom -Knoten aus der Konsole zuzugreifen:

kann beispielsweise <code><code> auf den aktuell ausgewählten DOM -Knoten zugreifen. Der Chrombrowser geht noch einen Schritt weiter und ermöglicht den Zugriff auf Knoten in der Verlaufsauswahl mit <code>, <code>,

usw.

Klicken Sie mit der rechten Maustaste auf den Knoten und wählen Sie 🎜> → JS Path <code>document.querySelector kopieren, und Sie können den Knotenpfad als JavaScript-Ausdruck (

Formular) kopieren, das für den Zugriff in der Konsole bequem ist.

Eine andere Möglichkeit besteht darin, den Knoten als temporäre Variable zu speichern. Klicken Sie mit der rechten Maustaste auf den Knoten und wählen Sie die entsprechende Option:

• Chrom
: mit der rechten Maustaste → "als globale Variable speichern"
• Firefox
: Klicken Sie mit der rechten Maustaste → "Verwenden Sie in der Konsole"
safari

: mit der rechten Maustaste → „Aufzeichnung Element“

Visualisieren Sie Elemente mit Tags

Entwickler -Tools können dabei helfen, Elemente mit bestimmten Attributen zu visualisieren, indem Tags neben Knoten angezeigt werden. Tags sind anklickbar und die von verschiedenen Browsern bereitgestellten Tags sind ebenfalls unterschiedlich. In <code>display: grid safari <code>display: inline-grid befindet sich eine Markierungsschaltfläche in der Symbolleiste der Elemente Panel, um die Sichtbarkeit eines bestimmten Markers umzuschalten. Wenn beispielsweise ein Knoten eine

oder

CSS -Deklaration aufweist, wird daneben ein Netzmarke angezeigt. Wenn Sie auf die Marke klicken, wird der Netzbereich, die Spurgröße, die Zeilennummer usw. auf der Seite hervorgehoben.

Firefox Tags, die derzeit vom Entwickler -Tool unterstützt werden, sind in der Firefox -Quelldokumentation aufgeführt. Beispielsweise zeigt ein Bildlaufzeichen ein Bildlaufelement an. Wenn Sie auf eine Marke klicken, wird das Element hervorgehoben, das den Überlauf verursacht, und zeigt die Überlaufmarke daneben an.

im Browser Chrom können Sie mit der rechten Maustaste auf einen beliebigen Knoten klicken und "Tageinstellungen ..." auswählen, um einen Container mit allen verfügbaren Tags zu öffnen. Ein Element mit <code>scroll-snap-type hat beispielsweise ein Scroll -Snap -Tag daneben, und das Klicken auf dieses Tag wird das Scroll -Snap -Overlay in diesem Element umschalten.

screenshot

Alle Mainstream -Browser unterstützen jetzt Screenshots von Entwickler -Tools und bieten eine neue Methode für Bildcreenshots.

Klicken Sie mit der rechten Maustaste auf den DOM-Knoten, den Sie erfassen möchten, und wählen Sie die Option zum Nutzen des Knotens aus (verschiedene Browser-Tags sind unterschiedlich).

Wiederholen Sie diesen Vorgang auf dem HTML -Knoten, um einen vollen Screenshot zu erhalten. Es ist zu beachten, dass Safari die Transparenz der Hintergrundfarbe des Elements beibehält, während Chrom- und Firefox es als weißer Hintergrund fängt.

Sie können auch "reaktionsschnelle" Screenshots nehmen, um die Seite mit einer bestimmten Ansichtsfensterbreite zu erfassen. Die Betriebsmethoden verschiedener Browser sind wie folgt:

• Chrom : CMD -Verschiebung M (macOS) oder Strg -Verschiebung M (Windows). Oder klicken Sie auf das Gerätesymbol neben dem Schecksymbol.
• Firefox : Tools → Browser -Tools → „Responsive Design Muster“
• safari : Entwicklung → „Responsive Design -Modus eingeben“

Chrom -Tipps: Überprüfen Sie die obere Ebene

Mit <code>#top-layer Chrome können Sie Elemente der oberen Ebenen wie Dialogfelder, Warnungen oder Modalfelder visualisieren und inspizieren. Wenn ein Element zu <code>

Das obige ist der detaillierte Inhalt vonEinige Cross-Browser-Devtools-Funktionen, die Sie vielleicht nicht kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!