11 Tipps für Benutzer von Chrome als Entwicklungsumgebung.
Aus dem einen oder anderen Grund haben Sie sich bei der Entwicklung auf Chrome konzentriert. Sie öffnen die Entwicklertools und beginnen mit dem Debuggen Ihres Codes.
Manchmal öffnen Sie die Konsole, um die Ausgabe Ihres Programms anzuzeigen, oder die Registerkarte Elemente, um die CSS-Stile von DOM-Elementen zu überprüfen.
Sind Sie wirklich gut in Chrome DevTools? Tatsächlich verfügen Entwicklertools über viele leistungsstarke Funktionen, die das Leben erleichtern, aber nur wenige Menschen kennen sie.
Ich werde Ihnen die nützlichsten erzählen.
Beginnen wir mit dem Befehlsmenü. Das Befehlsmenü in Chrome ähnelt der Befehlsshell unter Linux. Darin können Sie Befehle zur Steuerung von Chrome schreiben.
Öffnen Sie die Chrome Developer Tools. Verwenden Sie die Hotkeys, um auf das Befehlsmenü zuzugreifen:
- Windows: Strg + Umschalt + P.
- macOS: Cmd + Shift + P.
Sie können es auch über eine grafische Oberfläche wie folgt öffnen:
In diesem Bereich sehen Sie eine lange Liste von Befehlen, mit denen Sie auf viele nützliche Funktionen zugreifen können.
Erweiterte Screenshot-Funktionen
Sie müssen ziemlich oft Screenshots von einem Teil des Bildschirms machen, und ich habe keinen Zweifel daran, dass dafür praktische Programme auf Ihrem Computer installiert sind. Können Sie:
- einen Screenshot der gesamten Seite machen, einschließlich des Inhalts außerhalb des Ansichtsfensters?
- den Inhalt eines einzelnen DOM-Elements abrufen?
Dies ist häufig erforderlich, aber die meisten Systemtools zum Erstellen von Screenshots erfüllen diese Aufgaben nicht. Glücklicherweise haben wir spezielle Chrome-Befehle, um Screenshots wie diesen zu erstellen.
Hier sind sie:
- Screenshot Nehmen Sie einen Screenshot in voller Größe auf
- Screenshot Screenshot des Knotens erfassen
Beispiel
Öffnen Sie eine beliebige Webseite, z. B. die beliebtesten JavaScript-Artikel auf Medium: medium.com/tag/javascript .
Öffnen Sie das Befehlsmenü und führen Sie den Befehl aus
Screenshot Capture full size screenshot.
Wir haben einen Schnappschuss der gesamten aktuellen Seite gemacht.
Der ursprüngliche Screenshot hat eine gute Qualität, aber hier habe ich ein komprimiertes Bild hochgeladen, um Ihre Bandbreite zu sparen.
Wenn Sie einen Screenshot eines DOM-Elements erstellen möchten, können Sie die Systemtools verwenden, diese können das Element jedoch nicht perfekt genau erfassen. Chrome hat hierfür einen eigenen Befehl
Capture node screenshot.
Öffnen Sie zunächst die Registerkarte Elemente und wählen Sie das gewünschte Element aus. Führen Sie dann den Befehl aus.
Hier ist das Ergebnis:
Verwenden des Ergebnisses der letzten Operation in der Konsole
Wir debuggen oft Code in der Konsole. Angenommen, Sie möchten wissen, wie eine Zeichenfolge in JavaScript umgekehrt wird. Sie suchen im Internet nach den Informationen, die Sie benötigen, und stoßen auf diesen Code. Ja, dieser Code kehrt die Zeile um. Aber man ist noch nicht klar , wie die Methode funktioniert , , und was Ergebnis jeder von ihnen gibt. Sie können diesen Code Schritt für Schritt durchgehen, indem Sie ihn wie folgt schreiben: Jetzt wissen wir, welchen Wert jede Methode zurückgibt. Aber warum so viel schreiben? Es ist leicht, in einer so langen Aufzeichnung einen Fehler zu machen, und es ist schwer, ihn zu verstehen. Lassen Sie mich Ihnen ein Geheimnis verraten: In der Konsole befindet sich eine magische Variable, die das Ergebnis der letzten Operation speichert.
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_Ist eine spezielle Variable, deren Wert immer dem Ergebnis der letzten in der Konsole ausgeführten Operation entspricht. Dieser Trick erleichtert den Debugging-Prozess erheblich.
XHR-Anfrage erneut senden
In Front-End-Projekten müssen Sie häufig XHR verwenden, um Anforderungen zum Empfangen von Daten vom Server zu senden. Was ist, wenn ich meine Anfrage erneut senden muss?
Unerfahrene Entwickler aktualisieren die Seite, dies ist jedoch sehr unpraktisch. In Chrome können wir den Code direkt auf der Registerkarte "Netzwerk" debuggen.
- Öffnen Sie die Registerkarte Netzwerk.
- Drücken Sie die XHR-Taste.
- Wählen Sie die XHR-Anforderung aus, die Sie erneut senden möchten.
- Wählen Sie im Kontextmenü die Option XHR wiedergeben, um die Anforderung erneut abzuspielen.
Hier ist ein animiertes Beispiel:
Verfolgen Sie den Ladezustand der Seite
Es kann mehr als zehn Sekunden dauern, bis die Seite vollständig geladen ist. In solchen Fällen müssen Sie den Ladevorgang der Seite zu jedem einzelnen Zeitpunkt steuern.
In Chrome DevTools können Sie während des Ladens Screenshots einer Seite erstellen, indem Sie das Kontrollkästchen neben
Capture Screenshotsder Registerkarte Netzwerk aktivieren.
Wählen Sie den Screenshot aus, um Informationen zu den entsprechenden Netzwerkanforderungen anzuzeigen. Diese Visualisierung gibt Ihnen ein besseres Verständnis der Netzwerkanforderungen, die zu bestimmten Zeitpunkten an den Server gesendet werden.
Variablen kopieren
Wissen Sie, wie Sie den Wert einer JavaScript-Variablen in die Zwischenablage kopieren können?
Es scheint eine unmögliche Aufgabe zu sein, aber Chrome bietet eine spezielle Funktion, um sie zu lösen
copy.
ECMAScript enthält keine Definition für die Kopierfunktion, sondern eine Chrome-Funktion. Es kann verwendet werden, um den Wert einer JavaScript-Variablen in die Zwischenablage zu kopieren.
Kopieren eines Bildes als URI mit dem Präfix "data:"
Es gibt zwei Möglichkeiten, ein Bild in eine Seite einzufügen: Sie können eine Verknüpfung zu einer externen Datei herstellen oder ein Bild mithilfe der Daten einbetten : URL .
Daten: URL (vorangestellte URL
data:) ist ein Schema, mit dem kleine Dateien als Inline-Elemente in ein Dokument eingebettet werden können. Früher hieß es "Daten: URI", aber die WHATWG hat diesen Namen gelöscht.
Durch das direkte Einbetten kleiner Bilder in das Daten: URL-Schema wird die Anzahl der HTTP-Anforderungen an den Server reduziert, wodurch das Laden der Seite beschleunigt wird.
Wie mache ich das in Chrome?
Sehen Sie sich die Animation an:
Ausgabe eines Arrays von Objekten in eine Tabelle
Angenommen, wir haben eine Reihe von Objekten:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
Das Wahrnehmen solcher Informationen in der Konsole ist schwierig. Und wenn das Array länger ist und komplexere Elemente enthält, ist es noch einfacher, sich darin zu verlieren.
Glücklicherweise verfügt Chrome über eine Funktion, die ein Array von Objekten in eine Tabelle ausgibt.
Es wird für Sie nützlich sein und mehr als einmal.
Ziehen auf der Registerkarte Elemente
Manchmal müssen Sie einige DOM-Elemente auf der Seite verschieben, um die Benutzeroberfläche zu testen. Auf der Registerkarte "Elemente" können Sie jedes HTML-Element an eine beliebige Stelle im Code ziehen:
In diesem Beispiel habe ich ein Element auf die Registerkarte "Elemente" gezogen, und seine Position auf der Webseite wurde ebenfalls sofort geändert.
Verweisen auf das aktuell ausgewählte Element in der Konsole
$0 Ist eine weitere magische Variable, die das auf der Registerkarte Elemente ausgewählte Element enthält.
CSS-Pseudoklassen aktivieren
Pseudo-Klassen können Sie Stil ein Element nicht nur aufgrund seiner Lage im Dokumentbaum, sondern auch abhängig von externen Faktoren wie der Browserverlauf (zum Beispiel : visited ), Content - Zustand (zum Beispiel : geprüft in einigen Formen), Zeigerposition Maus (z. B. ändert die Pseudoklasse : hover den Stil des Elements, wenn Sie den Mauszeiger darüber halten).
Für ein Element können mehrere Pseudoklassen geschrieben werden. Um das Testen von Stilen zu vereinfachen, können Pseudoklassen direkt auf der Registerkarte Elemente aktiviert werden.
Beispiel
Schauen Sie sich den Seitencode an:
<!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 öffnen die Seite in einem Browser, überprüfen, wie die Pseudoklassen auf der Registerkarte Elemente funktionieren, und nehmen gegebenenfalls Änderungen vor.
Hotkey zum Verstecken von Gegenständen
Beim Debuggen von CSS-Stilen ist es häufig erforderlich, ein Element auszublenden. Chrome erledigt dies schnell: Sie müssen nur ein Element auswählen und eine Taste drücken
H.
Drücken Sie H auf Ihrer Tastatur.
Dieser Vorgang wendet einen Stil auf ein Element an
visibility: hidden !important;.
Speichern des DOM-Elements als globale temporäre Variable
Wenn wir schnell auf ein DOM-Element in der Konsole verweisen möchten, können wir dies folgendermaßen tun:
- Wähle einen Artikel aus.
- Öffnen Sie das Kontextmenü mit der rechten Maustaste.
- Wählen Sie Speichern als globale Variable.
