10 Chrome Console-Tipps, die Sie kennen müssen

Das Testen einer Website oder Webanwendung und ihrer Benutzeroberfläche kann schwierig und zeitaufwändig sein, insbesondere wenn Sie keine geeigneten Debugging-Tools wie die Chrome-Konsole, auch bekannt als Chrome-Entwicklertools, verwenden.

Fast alle Webbrowser unterstützen jetzt Entwicklertools, aber Google scheint entschlossener zu sein, die beste Umgebung für einen schnellen Debugging-Prozess bereitzustellen.

Google hat wirklich hart daran gearbeitet, Chrome DevTools so entwicklerfreundlich wie möglich zu gestalten. So sehr, dass die Frage nicht mehr lautet, was Sie mit diesen direkt in den Google Chrome-Browser integrierten Entwicklertools tun können. Jetzt kommt es darauf an, wie viel Sie über die Chrome-Konsole wissen.

Es gibt bestimmte Funktionen der Chrome-Konsole, die jeden Entwickler faszinieren. Einige glauben, dass es das beste Entwicklertool ist, um nachzuschlagen, wie ein Teil einer Website erstellt wird, einschließlich Skripts und Styling. Andere Entwickler finden es nützlicher beim Verfolgen von Link-Tags, Browser-Rendering, HTTP-Anforderungen und -Antworten, Seitenbruchpunkten, Testen neuer Funktionen oder Skripte usw.

Dieser Artikel kratzt kaum an der Oberfläche dessen, was mit der Konsole gemacht werden kann. Eine vollständige Übersicht über die Funktionen und das Handbuch finden Sie auf der offiziellen Google Developer-Seite.

So öffnen Sie die Chrome-Konsole

Herkömmlicherweise greifen Sie auf die Chrome DevTools zu, indem Sie auf die Schaltfläche Google Chrome anpassen und steuern (die drei vertikalen Punkte in der oberen rechten Ecke der Menüleiste des Chrome-Browsers) klicken, nach unten zu weiteren Tools scrollen und die Entwicklertools auswählen.

Tastaturkürzel: Strg + Umschalt + I für Windows und Cmd + Optionen + I für Macintosh.

Alternativ können Sie auf die Chrome-Konsole zugreifen, indem Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Website klicken und die Option Element prüfen auswählen.

Wenn Sie eine der oben genannten Methoden verwenden, wird das Chrome-Konsolenfeld neben oder unten im Browserfenster angezeigt. Sie können das Chromkonsolenfeld in einem separaten Fenster entsperren oder die Dockposition ändern, indem Sie auf die Schaltfläche Devtools anpassen und steuern (die drei vertikalen Punkte in der oberen rechten Ecke des DevTools-Bedienfelds) klicken und Ihre bevorzugte Position neben der Option Dockseite auswählen .

10 Chrome Console-Tipps, die jeder Entwickler kennen sollte

1. Mobile Geräte simulieren

Einer der wichtigsten Aspekte beim Testen von Websites besteht darin, festzustellen, wie reaktionsschnell Ihre Seitendesigns sind und welche Bruchstellen sie in Bezug auf verschiedene Geräte aufweisen. Sie können die Chrome-DevTools verwenden, um Medienabfragen zu testen oder die Auflösung herauszufinden, bei der eine Website unterbrochen würde, sodass Sie festlegen können, wo eine Medienabfrage angewendet werden soll, indem Sie verschiedene mobile Geräte simulieren.

Um auf den Gerätemodus der Chrome-Konsole zuzugreifen, in dem Sie verschiedene mobile Geräte simulieren können, klicken Sie auf die Umschalt-Gerätesymbolleiste (das kleine Telefon- und Tablet-Symbol) in der oberen linken Ecke des Chrome-Konsolenfensters. Dies würde das Website-Fenster in den Responsive-Modus versetzen.

Tastaturkürzel: Strg + Umschalt + M (Cmd + Umschalt + M).

Eine Reihe von Tools, die im Website-Fenster erscheinen würden, würde es Ihnen ermöglichen, die Geräte und die Auflösung auszuwählen, die Sie simulieren möchten, und auch mobile Geräte hinzuzufügen, die nicht auf der Liste verfügbar sind.

2. Überprüfen Sie die Netzwerkaktivität

Mit der Chrome-Konsole können Sie die Netzwerkaktivität einer Website überprüfen, um sicherzustellen, dass alle Ressourcen korrekt heruntergeladen und hochgeladen werden. Und auch, um die Eigenschaften jeder Ressource wie Bildgröße, Inhalt, HTTP-Header usw. zu überprüfen.

Klicken Sie im DevTools-Fenster auf die Registerkarte Netzwerk. Dadurch wird das Netzwerkfenster mit einem leeren Protokoll geöffnet, da das Tool nur Netzwerkaktivitäten protokolliert, während es geöffnet ist. Drücken Sie Strg + R (Cmd + R) oder laden Sie die Website neu, um die Netzwerkprotokollaktivität Ihrer Seite anzuzeigen.

Unten auf der Seite sollte eine Tabelle mit einem chronologischen Protokoll der Netzwerkaktivität Ihrer Seite angezeigt werden. Um weitere Informationen zu jeder Ressource anzuzeigen, klicken Sie auf die Netzwerkeinstellungen (das Zahnradsymbol auf der rechten Seite) und aktivieren Sie das Kontrollkästchen neben Große Symbolanforderungszeilen verwenden.

Sie können die Ladeleistung der Seite verbessern, indem Sie Fehler in den Netzwerkprotokollen debuggen, um Probleme wie die Dateikomprimierung zu beheben.

3. Netzwerkdrosselung

Ähnlich wie bei der Simulation von Mobilgeräten können Sie die Chrome-Konsole verwenden, um verschiedene Internetgeschwindigkeiten zu simulieren. Diese Funktion kann nützlich sein, wenn Sie die Leistung einer Website mit einer bestimmten Geschwindigkeit testen möchten, beispielsweise auf einem 3G-Mobilgerät.

Klicken Sie in der Menüleiste des Netzwerkbereichs auf Online (Drosselung) und wählen Sie die Internetgeschwindigkeit Ihrer Wahl aus. Um ein benutzerdefiniertes Netzwerkprofil hinzuzufügen, klicken Sie im Dropdown-Menü auf die Option „ Hinzufügen “ und geben Sie Ihre bevorzugte Upload- und Download-Geschwindigkeit ein.

4. Skriptausschnitt hinzufügen

Mit der Snippets-Funktion können Sie Ihren bevorzugten Zufallscode überall auf Ihrer Website einfügen. Anstatt denselben Code immer und immer wieder schreiben zu müssen, können Sie mit dieser Funktion ein Snippet speichern und jederzeit auf den Code zugreifen.

Klicken Sie auf die Registerkarte Quellen >> Ausschnitte >> Neue Ausschnitte. Dadurch wird eine neue Datei im Snippets-Bereich erstellt. Benennen Sie Ihr Snippet um und schreiben Sie Ihren kleinen JavaScript-Codeblock in das Fenster neben dem Bereich. Um das Snippet zu speichern, klicken Sie mit der rechten Maustaste auf die Snippet-Datei, klicken Sie auf Speichern unter und wählen Sie Ihr bevorzugtes Verzeichnis. Sie können auf diese Funktion auch über das Befehlsmenü zugreifen.

Verwenden Sie Ctrl + Shift + P oder Cmd + Shift + P (Mac), um das Befehlsmenü zu öffnen, geben Sie snippets ein und klicken Sie auf create new snippets .

Verwenden Sie Strg + Enter oder Cmd + Enter, um den Code auszuführen, oder klicken Sie auf das Symbol Run Snippet unterhalb des Textfensters.

5. Machen Sie Screenshots einer Website

Mit Chrome DevTools können Sie Screenshots von verschiedenen Teilen einer Website erstellen. Öffnen Sie das Befehlsmenü mit Strg + Umschalt + P oder Cmd + Umschalt + P (Mac) und geben Sie screenshot ein. Wählen Sie den gewünschten Screenshot-Typ aus. DevTool erstellt automatisch einen Screenshot und lädt das Bild als PNG-Datei in Ihr Standard-Downloadverzeichnis herunter.

6. Aktivieren Sie den Bearbeitungsmodus für den Inhaltstext

Mit der Chrome-Konsole können Sie Ihre Seiteninhalte direkt im Browserfenster bearbeiten. Klicken Sie auf die Registerkarte Konsole und aktivieren Sie die Funktion mit dem folgenden Code.

document.body.contentEditable = 'true';

Oder

document.designMode='on';

Drücken Sie die Eingabetaste, um die Funktion einzuschalten.

7. Farbwähler

Mit dem Farbwähler, der über eine Reihe von Tools verfügt, ist es einfacher, die Farbe auf Ihrer Website zu manipulieren. Mit der Pipette können Sie Farben direkt von Webseiten auswählen und in Ihren Farbeigenschaften festlegen. Sie können den Farbton und die Deckkraft Ihrer Farben mit der Farbauswahl anpassen und mit einfachen Klicks zwischen RGBA, HEX und HSLA konvertieren.

Um auf die Farbauswahl zuzugreifen, wählen Sie das Element aus, dessen Farbe Sie ändern möchten. Dies sollte die Elementregisterkarte und das Stylesheet-Fenster rechts öffnen. Suchen Sie die CSS-Eigenschaft des Elements und klicken Sie auf das entsprechende Farbfeld, um die Farbauswahl zu öffnen.

8. CSS-Eigenschaft bearbeiten

Die Chrome-Konsole bietet einfachen Zugriff, um die CSS-Eigenschaft jedes Elements auf einer Website anzupassen. Klicken Sie auf die Auswahlschaltfläche (Strg + Umschalt + C oder Cmd + Optionen + C), bewegen Sie den Mauszeiger auf das Element, das Sie bearbeiten möchten, um eine Übersicht der Elementeigenschaften zu erhalten, und klicken Sie auf das Element.

Dadurch sollten der HTML-Stamm des Elements unter dem Elementbereich und die CSS-Eigenschaften auf der rechten Seite des devtools-Bereichs hervorgehoben werden. Wechseln Sie zum Bereich „Stile“ und scrollen Sie zu den Eigenschaften, die Sie für Echtzeitänderungen bearbeiten möchten. Sie können die vollständigen Eigenschaften jedes Stils anzeigen, indem Sie Strg + Klicken (Cmd + Klicken) auf die Eigenschaft drücken.

9. JavaScript-Bruchstelle

Es ist wesentlich einfacher, JavaScript-Fehler mit den Breakpoints zu finden und zu beheben als mit der Methode console.log(). Dies liegt daran, dass Sie bei letzterer Methode manuell auf den Quellcode zugreifen und die console.log() Anweisungen in den relevanten Code einfügen müssen, bevor Sie die Seite neu laden, um die Protokolle zu überprüfen. Breakpoints erfordern nicht unbedingt, dass Sie die Codestruktur verstehen, bevor Sie den relevanten Code anhalten können.

Klicken Sie auf die Registerkarte Quelle > Seite und wählen Sie das Skript, das Sie debuggen möchten, aus dem jeweiligen Ordner aus. Sie können Haltepunkte in Chrome DevTools festlegen, indem Sie einfach auf die Zeilennummer klicken, die Sie anhalten möchten, um das Skript anzuhalten, sobald es in dieser Zeile ausgeführt wird.

Alternativ können Sie den Ereignis-Listener im Debugger-Bereich verwenden, um einen Bruchpunkt in Bezug auf das spezifische Ereignis festzulegen, auf das Sie im Skript abzielen, z. B. Mausklick oder Medienwiedergabe. Aktualisieren Sie die Seite mit Strg + R (Cmd + R) und verwenden Sie die Tools des Debugger-Bereichs, um die Schritte zu verschieben.

10. HTML-Element als globale JS-Variable speichern

Unabhängig davon, ob Sie ein komplexes Objekt untersuchen, das in der Konsole protokolliert ist, oder ein DOM-Element auf einer Website, Sie können automatisch einen Verweis darauf global speichern. Dies ist beim Debuggen sehr praktisch, da Sie sie einfach als globale Variable untersuchen können.

Klicken Sie mit der rechten Maustaste auf das Objekt in der Konsole oder den HTML-Block eines Elements auf der Registerkarte „Element“ und wählen Sie im Dropdown-Menü „Als globale Variable speichern“ aus. Die Chrome-Konsole speichert das Element automatisch als globale Variable und stellt es in der Konsole zur Verfügung. Der Variablenname lautet „tempN“, wobei N für die Anzahl der Male steht, die Sie Variablen mit dieser Methode gespeichert haben. Die erste Variable wird offensichtlich „temp1“ und die zweite „temp2“ heißen.

Fazit

Kompetenz und Geschwindigkeit sind Attribute der eigenen Vertrautheit mit ihren Tools, und dies geht tief in die Chrome DevTools ein. Je mehr Informationen Sie haben, desto besser und schneller werden Sie wahrscheinlich die Tools verwenden, was wiederum die für das Debuggen aufgewendete Zeit verringern würde.

Es könnte sich mehr lohnen, diese Woche einen kleinen Prozentsatz Ihrer Zeit aufzuwenden und als nächstes die Dokumentation durchzulesen, beginnend mit den Debugging-Aspekten, die Sie oft am meisten Zeit in Anspruch nehmen. Wir werden nicht überrascht sein, wenn die oben genannten Tipps zur Chrome-Konsole Ihre Lieblingsfunktion nicht erwähnen. Bitte teilen Sie uns diese im Kommentar unten mit.