Der Autor des Beitrags, den wir übersetzen, verwendet fast täglich die Chrome-Entwicklertools. Hier möchte er über die wenig bekannten Funktionen dieser Tools sprechen. Er sagt, wenn er vorher von ihnen wüsste, wären sie definitiv nützlich für ihn.
1. Ein einfacher Weg, um einen Link zu einem untersuchten Element zu erhalten
Mit den Chrome-Entwicklertools können Sie einen Link zu jedem untersuchten Element in der Konsole abrufen. Klicken Sie dazu im Bedienfeld
Elements mit der rechten Maustaste auf ein Element und wählen Sie im Dropdown-Menü die
Store as global variable speichern aus.
Eine einfache Möglichkeit, einen Link zu einem untersuchten Element zu erhalten2. Erstellen interaktiver Ausdrücke, die an die Konsole angehängt sind
In den Entwicklertools können Sie interaktive Ausdrücke erstellen, die oben auf der Konsole angebracht sind und deren Werte ständig auf dem neuesten Stand gehalten werden. Die Vorgehensweise zum Erstellen solcher Ausdrücke ist in der folgenden Abbildung dargestellt. Wenn Sie wissen, dass bestimmte Elemente auf der Seite aktualisiert werden sollten, kann diese Funktion sehr nützlich sein, um sie zu beobachten.
Interaktive Ausdrücke in Chrome3. Simulieren Sie langsame Internetverbindungen
Auf der Registerkarte "
Network der Chrome Developer Tools können Sie eine Browserverbindung zu verschiedenen Netzwerken simulieren. Diese Funktion kann äußerst nützlich sein, um das Verhalten einer Seite in einer Situation zu bewerten, in der das Laden einige Sekunden dauert.
Durchsuchen einer Seite, die verschiedene Möglichkeiten zum Herstellen einer Verbindung zum Internet simuliert4. Deaktivieren Sie den Cache und speichern Sie Protokolle, wenn Sie zwischen Seiten wechseln
Ich musste mich vielen Problemen stellen, die, wie sich herausstellte, keine Fehler waren. Ihre Ursache war das falsche Laden des zwischengespeicherten Codes. Um solche Probleme zu beseitigen, können Sie das Caching mithilfe der Funktionen auf der Registerkarte
Network vollständig deaktivieren. Dies ist ein Kontrollkästchen
Disable cache deaktivieren. Bitte beachten Sie, dass der Cache nicht nur funktioniert, wenn die Entwickler-Symbolleiste geöffnet ist.
Das Speichern von Protokollen ist eine weitere nützliche Funktion, aufgrund derer die Konsole beim erneuten Laden der untersuchten Seite nicht gelöscht wird. Aktiviert dieses Kontrollkästchen Aktivieren Sie das
Preserve log auf der Registerkarte
Network beibehalten.
Cache deaktivieren und Protokolle speichern5. Screenshots machen
Die Chrome Developer Tools enthalten ein integriertes Screenshot-Tool. Um es zu verwenden, müssen Sie bei geöffnetem Werkzeugfenster die Tastenkombination
Ctrl+Shift+P anwenden und dann das Schlüsselwort-
screenshot in das angezeigte Feld eingeben und die gewünschte Methode zum Erstellen eines Screenshots auswählen.
Erstellen eines Screenshots über die Entwickler-Symbolleiste6. Der Befehl console.log () ist bei weitem nicht die einzige Möglichkeit, etwas in der Konsole zu protokollieren
Jeder verwendet den Befehl
console.log() , um Debugging-Daten zu protokollieren. Dieser Befehl erschöpft jedoch nicht die Protokollierungsfunktionen. Insbesondere stehen dem
console.warn() Befehle
console.warn() und
console.error() zur Verfügung.
Diese Befehle zeigen Meldungen mit unterschiedlichen Protokollierungsstufen an der Konsole an. Hierbei handelt es sich um Warnungen bzw. Fehlermeldungen. Sie werden in verschiedenen Farben und Symbolen hervorgehoben. Nachrichten, die von verschiedenen Befehlen in der Konsole angezeigt werden, können gefiltert werden.
Console.warn () und console.error ()Mit dem Befehl
console.table() können Sie einige strukturierte Daten anzeigen, die bequem in einem Tabellenformat formatiert sind.
Befehl console.table ()Die Möglichkeiten zum Arbeiten mit der Konsole sind nicht auf diese Befehle beschränkt. Zum Beispiel gibt es auch Befehle wie
console.assert() und
console.group() .
Hier finden Sie eine detaillierte Geschichte über solche Teams.
7. Das Konstrukt $ _ gibt den zuletzt berechneten Ausdruck zurück
Das Konstrukt
$_ kann verwendet werden, um den Wert einer vorherigen Operation zurückzugeben, die in der Konsole ausgeführt wurde.
Verwenden des Konstrukts $ _8. Der Befehl $ () ist eine Abkürzung für document.querySelector ()
Mit dem Befehl
$() in der Konsole können Sie schnell ein Element auswählen. Die Funktionen von jQuery werden hier übrigens nicht angewendet, obwohl es auf den ersten Blick so scheint, als ob dies nicht der Fall ist.
Ebenso ist der Befehl
$$() eine Abkürzung für
document.querySelectorAll() .
Verwenden von $ ()9. Aktivieren von Elementzuständen wie Schweben oder Fokussieren im Bedienfeld „Stile“
Wenn es während des Studiums eines Elements erforderlich ist, sein Verhalten im
hover , kann dies eine entmutigende Aufgabe sein, da zum Übersetzen eines Elements in diesen Zustand ein Mauszeiger darüber erforderlich wäre. Die Lösung dieses Problems kann erleichtert werden, indem die Funktionen des
Styles . Hier können Sie erzwingen, dass Elemente in Zustände wie
hover oder
focus .
Gegenstand zum Status zwingen10. Die Kombination aus Drücken der Strg-Taste und Klicken mit der Maus hilft beim Auffinden einer CSS-Regeldefinition
Mussten Sie jemals wissen, wo eine CSS-Regel beschrieben wird? Diese Aufgabe ist sehr einfach zu lösen, indem Sie die
Ctrl Taste drücken und auf die für Sie interessante Regel klicken. MacOS verwendet
Cmd anstelle von
Ctrl .
Strg + Klick - Suche nach dem Speicherort der CSS-RegeldefinitionLiebe Leser! Was würden Sie der Liste der wenig bekannten Funktionen der Chrome-Entwicklertools hier hinzufügen?
