Allgemeine Information
Sie verwenden die Chrome-Entwicklertools, um Ihren Code zu debuggen.
Der Befehl zum Öffnen von Entwicklertools
Manchmal rufen Sie das Konsolenfenster auf, um mithilfe der Funktionen der Konsole die von Ihrem Programm ausgegebenen Daten zu überprüfen. Manchmal sehen Sie sich das Elementbedienfeld an, um das CSS anzuzeigen, mit dem die DOM-Elemente formatiert wurden.
Konsolenbedienfeld
Aber kennen Sie die Chrome-Entwicklertools gut? Tatsächlich gibt es viele leistungsstarke, aber nicht bekannte Funktionen, die Ihre Produktivität erheblich verbessern können.
Hier werde ich über die nützlichsten Funktionen sprechen, die Sie hoffentlich nützlich finden werden.
1. Menüpunkt Befehl ausführen
Zunächst möchte ich Ihnen kurz den Menüpunkt Entwicklertools mit dem Namen Ausführen erläutern. Dieser Menüpunkt für Chrome ist wie eine Shell für Linux. Hier können Sie Befehle zur Steuerung von Chrome eingeben.
Um zu diesem Menüpunkt zu gelangen, öffnen Sie die Entwicklertools. Anschließend können Sie sofort die entsprechende Tastenkombination verwenden:
- Unter Windows -
Ctrl + Shift + P. - In MacOS -
Cmd + Shift + P.
Sie können auch einfach auf die drei Punkte rechts im Kopfbereich des Entwicklertools klicken und im angezeigten Menü den Befehl Ausführen auswählen.
Befehlsmenüpunkt ausführen
Danach wird das Befehlsfeld geöffnet, in dem Sie viele Befehle finden, mit denen Sie viele interessante Dinge tun können.
Befehlsfenster
Lassen Sie uns über einige Befehle in diesem Bereich sprechen.
2. Erweiterte Mechanismen zum Erstellen von Screenshots
Ein Webentwickler muss manchmal einen Screenshot eines Teils des Bildschirms machen. Ich bin sicher, Sie haben bereits ein sehr praktisches Programm zur Lösung dieses Problems. Hier sind einige der typischen Aufgaben zum Erstellen von Screenshots:
- Screenshots von ganzen Seiten machen, auch von Teilen davon, die im Browserfenster nicht sichtbar sind.
- Erfassen Sie eine Kopie eines Bildschirmbereichs, der für ein bestimmtes DOM-Element spezifisch ist.
Dies sind häufige Aufgaben, die jedoch mit allen Arten von Screenshot-Software nicht einfach zu erledigen sind. Um mit ihnen fertig zu werden, können wir die Funktionen des oben beschriebenen Menübefehls Befehl ausführen verwenden. Insbesondere sprechen wir über die folgenden Befehle:
- Screenshot Nehmen Sie einen Screenshot in voller Größe auf
- Screenshot Screenshot des Knotens erfassen
▍ Beispiel
Öffnen Sie eine Seite, z. B. den Abschnitt " Mittel " des beliebtesten JavaScript-Inhalts.
Öffnen Sie nun die Befehlsleiste und wählen Sie einen Befehl darin aus
Screenshot Capture full size screenshot.
Der Befehl, einen Screenshot der gesamten Seite zu erstellen
Wir haben einen Screenshot der gesamten Seite, der in den Download-Ordner verschoben wird.
Screenshot der gesamten Seite
Wie Sie sehen können, ist das Bild sehr hoch. Ich habe es hier der Einfachheit halber reduziert. In der Tat ist dies ein Bild von großer Qualität.
Wenn Sie einen Screenshot eines DOM-Elements erstellen müssen, können Sie auch ein Programm eines Drittanbieters verwenden, mit dem Sie jedoch kein Bild erhalten, das sich genau auf das gewünschte Element bezieht. Das Team wird uns helfen, dieses Problem zu lösen
Screenshot Capture node screenshot.
Sie verwenden es folgendermaßen: Zuerst wählen sie das gewünschte Element im Elementbedienfeld aus und führen dann den Befehl aus.
Erfassen eines Screenshots eines Bereichs des Bildschirms, der einem bestimmten DOM-Element zugeordnet
ist So sieht der Screenshot aus, wenn er im vorherigen animierten Bild aufgenommen wurde.
Screenshot des DOM-Elements
3. Beziehen Sie sich auf die Ergebnisse der letzten Operation in der Konsole
Die Konsole wird häufig zum Debuggen von Code verwendet. Stellen Sie sich vor, Sie müssen lernen, wie Sie eine Zeichenfolge mit JavaScript umkehren. Sie haben im Internet gesucht und diesen Code gefunden:
'abcde'.split('').reverse().join('')
Sie haben versucht, diesen Code in der Konsole auszuführen, und er scheint ordnungsgemäß zu funktionieren.
Überprüfen des Codes in der Konsole
Dieser Code "dreht" also die Zeile. Sie sind jedoch verwirrt darüberwie die
split(),reverse()undMethodenArbeitjoin(). Sie wissen nicht genau, womit sie in den Zwischenstufen des "Umkippens" der Linie arbeiten. Daher entscheiden Sie sich, diesen Code durchzugehen. Sie beginnen mit der ersten Methode, erhalten das Ergebnis, führen die zweite Methode für dieses Ergebnis aus und so weiter.
Erkunden des Codes
Nach Abschluss dieser Experimente ist es durchaus möglich zu verstehen, wie der ursprüngliche Code funktioniert.
Das Arbeiten in diesem Stil erfordert jedoch viele unnötige Aktionen. Sie können hier Fehler machen, und alles sieht ziemlich chaotisch aus. Um die Situation zu verbessern, reicht es zu wissen, dass Sie in der Entwickler-Tools-Konsole eine "magische" Variable verwenden können
$_, mit der Sie auf das Ergebnis der zuletzt ausgeführten Operation verweisen können.
Verwenden von $ _
Wie Sie sehen,
$_handelt es sich um eine spezielle Variable, deren Wert immer dem Ergebnis der letzten in der Konsole ausgeführten Operation entspricht. Diese Variable kann Ihnen beim Debuggen Ihres Codes sehr gut helfen.
Beispiel für die Verwendung von $ _
4. Wiederholen Sie das Senden der XHR-Anforderung
Bei der Arbeit an Front-End-Projekten muss häufig die XHR-API verwendet werden, um Datenanforderungen an das Back-End zu stellen. Was ist, wenn Sie eine bereits gesendete XHR-Anfrage erneut senden müssen?
Wenn ein unerfahrener Entwickler dieses Problem löst, aktualisiert er einfach die Seite. Das ständige Aktualisieren von Seiten zum erneuten Senden von Anforderungen kann jedoch überwältigend sein. Tatsächlich können Sie mit den Tools des Netzwerkbedienfelds mit Abfragen arbeiten.
XHR-Anforderungswiederholungsbefehl Gehen Sie
wie folgt vor, um eine bereits gesendete XHR-Anforderung erneut auszuführen:
- Öffnen Sie das Netzwerkfenster.
- Klicken Sie auf die Schaltfläche XHR.
- Rufen Sie das Kontextmenü der Anfrage auf, um es zu wiederholen.
- Wählen Sie im Menü die Option XHR wiedergeben.
Hier ist ein animiertes Beispiel für die obigen Schritte.
Wiederholungsversuch der XHR-Anforderung
5. Überwachung des Seitenladens
Es kann mehr als zehn Sekunden dauern, bis die Seite vollständig geladen ist, vom Anfang dieses Prozesses bis zum Ende. Um herauszufinden, was genau während des Ladens der Seite passiert, können Sie die Überwachung dieses Prozesses organisieren.
In den Chrome-Entwicklertools können Sie Screenshots einer Seite zu unterschiedlichen Ladezeiten erstellen, indem Sie im Bereich "Netzwerk" das Flag "Screenshots erfassen" setzen.
Screenshots-Flag erfassen und Seiten laden überwachen
Durch Klicken auf die Screenshots können Sie die Anforderungen anzeigen, die zu den entsprechenden Zeitpunkten ausgeführt wurden. Durch eine visuelle Darstellung des Ladevorgangs von Seiten erhalten Sie ein besseres Verständnis als zuvor für die genauen Vorgänge beim Laden von Seiten.
Seitenlade-Analyse
6. Kopieren des Inhalts von JavaScript-Variablen
Ist es möglich, den Wert einer JavaScript-Variablen für die spätere Verwendung dieses Werts zu kopieren? Es ist möglich, dass Ihnen eine solche Aufgabe unmöglich erscheint. In der Chrome-Konsole können Sie jedoch einen speziellen Befehl verwenden
copy(), mit dem Sie den Inhalt von Variablen in die Zwischenablage kopieren können.
Kopieren von JS-Variableninhalten
Diese Funktion ist im ECMAScript-Standard nicht verfügbar. Es steht uns dank Chrome zur Verfügung.
7. Kopieren Sie das Bild als Daten-URL
Es gibt zwei Möglichkeiten, mit Bildern zu arbeiten, die auf Webseiten angezeigt werden. Die erste Möglichkeit besteht darin, Bilder aus externen Quellen zu laden. Die zweite ist das Codieren von Bildern in Form von sogenannten Daten-URLs . Sie können auf MDN lesen, dass eine Daten-URL eine URL mit dem Präfix: data ist. Mit diesen URLs können kleine Dateien direkt in das Dokument eingebettet werden. Früher wurden sie als "Daten-URIs" bezeichnet, bis die WHATWG diesen Namen zurückzog.
Durch das Konvertieren kleiner Bilder als Daten-URLs und das direkte Einbetten in den Seitencode wird die Anzahl der HTTP-Anforderungen reduziert, die beim Laden der Seite gestellt werden müssen. Dies kann das Laden von Seiten beschleunigen.
Wie verwandle ich ein Bild mit Chrome in eine Daten-URL?
Unten finden Sie eine animierte Demonstration dieses Prozesses.
Kopieren eines Bildes als Daten-URL
8. Bequeme Darstellung von Arrays von Objekten
Stellen Sie sich vor, wir haben eine Reihe von Objekten. Zum Beispiel - so:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
Lassen Sie es uns in der Konsole anzeigen.
Array von Objekten, die in der Konsole angezeigt werden
Wie Sie sehen können, ist es nicht sehr praktisch, sie anzuzeigen, wenn sie in diesem Formular angezeigt werden. Und wenn ein solches Array länger ist und die darin enthaltenen Elemente eine komplexere Struktur haben, wird es noch schwieriger, damit umzugehen.
Glücklicherweise verfügt Chrome über eine spezielle Funktion
table(), mit der Sie Arrays von Objekten formatieren können.
Formatiertes Array von Objekten
Diese Funktion ist oft sehr nützlich.
9. Ziehen Sie Objekte in das Elementbedienfeld
Manchmal müssen Sie beim Testen der Benutzeroberfläche die Position einiger DOM-Elemente der Seite ändern. Zu diesem Zweck können wir die Funktion des Elements-Bedienfelds verwenden, mit der alle HTML-Elemente im Seitencode verschoben werden.
Ziehen und Ablegen eines Elements
Die obige Animation zeigt, wie ich ein Element
<div>imElementbedienfeldziehe, um die Position dieses Elements auf der Webseite zu ändern.
10. Verweisen auf das aktuell ausgewählte Element in der Konsole
Lassen Sie uns über eine andere "magische" Variable sprechen, die in der Konsole verwendet werden kann. Dies ist eine Variable
$0. Es ermöglicht den Zugriff von der Konsole auf ein Element, das im Elementbedienfeld hervorgehoben ist.
Verweis auf ein Element mit $ 0
11. Pseudoklassen erkunden
In MDN können Sie Folgendes über
Pseudoklassen lernen: Pseudoklassen bieten die Möglichkeit, ein Element nicht nur auf der Grundlage von Beziehungen im DOM-Baum zu formatieren, sondern auch auf externen Faktoren wie dem Verlauf von Besuchen (z. B. besucht) und dem Status des Inhalts (z. B. bei einigen Elementen überprüft) Form) oder die Position des Mauszeigers (Beispiel: Hover bestimmt, ob sich der Mauszeiger über einem Element befindet).
Für ein Element können Sie Stile bereitstellen, die sich auf verschiedene Pseudoklassen beziehen. Um diese Stile zu testen, können Pseudoklassen direkt im Elementbedienfeld bearbeitet werden.
Verwalten von Pseudoklassen
▍ Beispiel
Hier ist der Code für die Webseite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 150px;
}
div:hover{
color: red;
}
div:active{
color: blue;
}
div:focus{
color: brown;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
Wir müssen das Styling der Pseudoklassen überprüfen. Dazu können wir das Elementbedienfeld verwenden.
Erkundung von Pseudoklassenstilen
12. Element schnell ausblenden
Beim Debuggen von Seitenstilen müssen Sie häufig ein Element ausblenden. Um dies so schnell wie möglich zu tun, wählen Sie einfach ein Element aus und drücken Sie eine Taste auf der Tastatur
H.
Schnelles Ausblenden eines Elements
Dies fügt
visibility: hidden !important;dem entsprechenden Elementeinen Stil hinzu.
13. Speichern eines Verweises auf ein DOM-Element in einer temporären globalen Variablen
Wenn wir schnell einen Verweis auf ein DOM-Element in der Konsole erhalten möchten, können wir die folgende Abfolge von Aktionen ausführen:
- Wähle einen Artikel aus.
- Klicken Sie mit der rechten Maustaste darauf, um das Kontextmenü aufzurufen.
- Wählen Sie im Menü den Befehl Als globale Variable speichern.
Speichern einer DOM-Elementreferenz als temporäre globale Variable
Welche wenig bekannten Funktionen der Chrome-Entwicklertools verwenden Sie?
