👨🏻‍💼 🛀🏽 📭 Meine Lieblings-Chrome-Entwicklertools 🔒 🎼 🖕

Guten Tag, Freunde!

Chrome Developer Tools ist ein sehr leistungsfähiges Toolkit zum Entwickeln von Webanwendungen. Mit diesen Tools können wir im DOM navigieren, Serveranforderungen überprüfen, die Anwendungsleistung optimieren usw.

Unter den vielen verfügbaren Funktionen gibt es einige wirklich interessante. Diese "Funktionen" helfen dabei, ein oder zwei Klicks weniger zu machen - haben wir uns deshalb nicht hier versammelt?

JQuery-Stil für den Zugriff auf das DOM

jQuery ist eine großartige Bibliothek. Sie verwaltet das Web seit einer ganzen Ära. Nach einigen Berichten mehr als 70% der beliebtesten Websites in der Welt diese oder jene Version von jQuery verwenden. Dies ist eine erstaunliche Leistung für eine Bibliothek, die 2006 geschrieben wurde.

Die beliebteste von jQuery bereitgestellte API ist $, mit der DOM-Elemente ausgewählt werden. In der Chrome Developer Tool Console (im Folgenden als Konsole bezeichnet) kann der $ selector verwendet werden, ein Alias von document.querySelector ().

Um beispielsweise auf eine Schaltfläche zu klicken, müssen Sie Folgendes tun:

$$ ist ein Synonym für document.querySelectorAll ():

Es gibt noch ein paar Tricks für die Arbeit mit $. Manchmal ist der Selektor zu komplex, um manuell eingegeben zu werden, oder wir können einfach nicht die ausreichende Spezifität des Selektors bestimmen. Wenn wir ein Element auf der Registerkarte "Elemente" auswählen, können wir es mithilfe der Variablen $ 0 in der Konsole abrufen:

Über die Konsole können Sie auf die letzten 5 ausgewählten Elemente zugreifen. Diese Elemente sind über die Variablen $ 0- $ 4 verfügbar:

Elementeigenschaften kopieren

Die Registerkarte Elemente ist sehr nützlich. Es speichert den DOM-Baum unserer Website, ermöglicht es Ihnen, die Stile von Elementen anzuzeigen und diese im laufenden Betrieb zu ändern.

Eine wirklich coole Sache, die ich entdeckt habe, ist die Möglichkeit, die Eigenschaften eines Elements (und nicht nur) über das Kontextmenü zu kopieren.

Sie können beispielsweise einen Element-Selektor kopieren:

Dieser Selektor ist möglicherweise nicht spezifisch genug oder zu spezifisch, hilft jedoch beim Debuggen des Codes.

Wie Sie sehen können, können wir auch Elementstile kopieren, den "Pfad" JS (document.querySelector (SELECTOR)) oder XPath.

Filterung von Netzwerkanforderungen

Manchmal müssen wir mit einer Seite arbeiten, die viele Anfragen an den Server sendet. Ich meine, viele Anfragen.

Auf der Suche nach einer bestimmten Anfrage durch diese Wildnis zu waten, ist keine angenehme Beschäftigung. Glücklicherweise können Sie Abfragen herausfiltern.

Mit einer Reihe von Filtern können Sie Abfragen nach Typ anzeigen, z. B. XHR / Fetch, Stylesheets, JS-Skripte, Bilder usw.:

Sie können auch Ihre eigenen Kriterien im Eingabefeld über den Filtern angeben:

Emulieren verschiedener Netzwerkverbindungsgeschwindigkeiten

Über die Registerkarte "Netzwerk" können wir unsere Site unter Bedingungen unterschiedlicher Verbindungsgeschwindigkeiten testen. Die Standardeinstellung ist Online, wobei Sie die Bandbreite Ihrer Verbindung voll nutzen können.

Zusätzlich zu Online stehen Voreinstellungen wie Fast 3G, Slow 3G und Offline zur Verfügung, die sich in der Seitenladegeschwindigkeit, der Dateidownloadgeschwindigkeit und der Zeitverzögerung unterscheiden. Wenn Sie etwas anderes emulieren müssen, können Sie über die Schaltfläche Hinzufügen ... Ihr eigenes Profil hinzufügen:

Verwenden von Live-Ausdrücken in der Konsole

Was sind Live-Ausdrücke?

Live-Ausdrücke sind Ausdrücke, die in der Konsole ständig „ausgewertet“ werden. Angenommen, Sie möchten den Wert einer Variablen verfolgen. Sie können es immer wieder eingeben:

Dank Live Expressions können Sie sich auf den Code konzentrieren und Chrome die Möglichkeit geben, Änderungen unabhängig zu überwachen:

Diese Funktion ist sowohl für in der Konsole deklarierte Variablen als auch für im Skript deklarierte Variablen verfügbar.

Emulieren Sie verschiedene Geräte

Diejenigen, die mit reaktionsschnellen Anwendungen arbeiten, sind mit dem Gefühl vertraut, das Sie empfinden, wenn Sie hart und lange an der Schönheit des Seitenlayouts arbeiten, um zu sehen, wie alles auf dem Gerät mit einer anderen Auflösung auseinander fällt.

Ich bin nicht hier, um über Medienanfragen zu sprechen, sondern um einen Weg zu zeigen, ihre Arbeit zu testen.

Wenn Sie auf die Schaltfläche klicken, die wie ein Tablet und ein Telefon aussieht, sehen Sie, wie sich der Anzeigebereich des Browsers je nach Größe der verschiedenen Geräte ändert.

Sie können ein Gerät aus der Liste der Voreinstellungen auswählen, die beliebte Geräte wie iPhone X, iPad Pro, Pixel 2, Pixel 2 XL usw. enthalten. Diese Liste ist bei weitem nicht vollständig (nicht sehr relevant), reicht jedoch aus, um die meisten Probleme zu lösen.

Wenn das benötigte Gerät nicht aufgeführt ist, können Sie die Auflösung manuell einstellen. Wie Sie sehen können, habe ich meine eigene Berechtigung zum Emulieren von OnePlus 6 (meinem alltäglichen Gadget) festgelegt:

Artikelstatus ändern

Sind Sie auf eine Situation gestoßen, in der Sie mit den auf ein Element angewendeten Stilen spielen möchten, wenn Sie mit der Maus darüber fahren (: Hover), aber jedes Mal, wenn Sie den Cursor auf die Registerkarte "Stile" bewegen, verliert das Element seinen Schwebeflug?

Mit Entwicklertools können Sie den Status eines Elements korrigieren. Wir können Status wie "Aktiv", "Schweben", "Fokus", "Fokus innerhalb" und "Besucht" auf einfache Weise aktivieren / deaktivieren.

Hier sind meine bevorzugten Chrome-Entwicklertools. Vielen Dank für Ihre Aufmerksamkeit.

Viel Spaß beim Codieren!

Meine Lieblings-Chrome-Entwicklertools