8 Weniger bekannte, aber tödliche Funktionen von Chrome DevTools

Die Chrome DevTools sind einer der Hauptgründe, warum Entwickler sich weigern, einen anderen Browser anzurühren.

Aber die meisten von uns nutzen nur eine Handvoll Funktionen und wissen nicht, dass es noch viele weitere atemberaubende Funktionen gibt, die im Stillen veröffentlicht werden.

Lassen Sie uns einige dieser versteckten Juwelen Aufdecken!

Jeder hat sein bevorzugtes Betriebssystem, seine bevorzugte Hardware-Plattform, seinen bevorzugten Gerätetyp, seinen bevorzugten Formfaktor, usw. Aber eines haben alle gemeinsam - sie verwenden den Chrome-Browser und nur den Chrome-Browser! Ich denke, man kann mit Sicherheit sagen, dass die Browser-Kriege vorbei sind und Chrome überzeugend gewonnen hat

Windows-Benutzer verwenden den Standardbrowser nur, um Chrome herunterzuladen und danach Chrome zu verwenden, wobei sie alle "Empfehlungen" von Windows ignorieren. Dasselbe gilt für Apple-Geräte (insbesondere MacBooks und Geräte mit größeren Bildschirmen), wo Benutzer und Entwickler Safari trotz der vielen starken Behauptungen und Bekehrungstaktiken von Apple meiden

Und wenn auf einem Gerät nicht Chrome läuft, ist die Wahrscheinlichkeit groß, dass es einen Chrome-kompatiblen Ableger wie Mutig oder Vivaldi verwendet. Ja, ich weiß, technisch gesehen basieren diesen Browser nicht auf Chrome, aber das ist eine andere Diskussion. Der Durchschnittsnutzer mag diese andere Browser aus ideologischen oder speziellen Gründen verwenden, aber wenn es um Entwickler geht, ist kein anderer Browser als Chrome in Sicht

Selbst die Tatsache, dass er ein speicherfressendes Monster ist, wird ignoriert. Der Grund dafür ist einfach: Chrome DevTools

Wenn Sie diesen Artikel lesen, können Sie davon ausgehen, dass Sie entweder ein Power-User, ein Tüftler, ein Webentwickler oder etwas in dieser Richtung sind. Als solcher braucht niemand von uns eine Einführung in die DevTools, wie man sie öffnet, ihre verschiedenen Funktionen usw.

Lassen Sie uns stattdessen, ohne Zeit zu verschwenden, direkt in einige der weniger bekannten, aber erstaunlich nützlichen Funktionen der Chrome DevTools eintauchen

Entwurfsmodus

Zu den Dingen, die die Entwickler routinemäßig tun, gehört es, ein Element auf der Seite zu inspizieren und dann dessen HTML zu ändern, um eine Vorschau zu erhalten oder die Auswirkungen einer Änderung zu testen.

Die Arbeit mit HTML direkt in den DevTools ist jedoch nicht gerade einfach: Sie müssen sich durch die Tag-Suppe wühlen, Ihre Augen anstrengen, um die richtige öffnende/schließende Klammer zu finden, und mit einer lächerlichen Menge an Leerraum bei der Bearbeitung von Text zurechtkommen (Leerraum, der in dem Dokument, das Sie gerade sehen, eindeutig fehlt), sind nur einige der Probleme, mit denen Sie zu kämpfen haben. Noch schlimmer ist es, wenn Sie ein Designer sind und sich nicht durch das Chaos wühlen wollen

Hier ist ein Screenshot von einer der Seiten dieser Website (Geekflare)

Das tief verschachtelte HTML und die mysteriösen, verwirrenden CSS-Klassen sind typisch für jede nicht-triviale Website von heute, und hier ist die Erfahrung mit DevTools gelinde gesagt suboptimal. 🤭

Aber es gibt eine DevTools-Funktion namens Design Mode, die in vielen Fällen die Schmerzen lindern kann. Mit dem Designmodus (das ist übrigens nicht der offizielle Name, sondern nur der Name, den die Leute dafür gewählt haben, wie er aktiviert wird und was er tut - keine Sorge, das werden wir bald sehen!) können Änderungen an der Seite visuell und live vorgenommen werden, genau wie bei der Bearbeitung einer Tabellenkalkulation oder eines Texteditors! Der einzige Haken an der Sache ist, dass diese Funktion nicht standardmäßig aktiviert ist und die Aktivierung ein wenig Kopfzerbrechen bereitet, insbesondere für Nicht-Entwickler

In jedem Fall ist es ganz einfach: Sie müssen nur die folgenden Anweisungen befolgen. Je nachdem, wo Sie auf der Kurve der Benutzerkenntnisse stehen, kann dies lächerlich einfach oder mäßig schwierig sein. So müssen Sie vorgehen

• Vergewissern Sie sich, dass die Webseite, die Sie bearbeiten möchten, geladen ist und Sie sie gerade betrachten (d.h. die betreffende Registerkarte ist die aktive).
• Öffnen Sie das DevTools-Panel auf die übliche Weise (Tastaturkürzel, Mausklicks, was auch immer). Ich verwende gerne Tastenkombinationen, und auf dem Mac ist Opt Cmd I genau das Richtige.
• Wenn Sie die DevTools geöffnet haben, gehen Sie auf die Registerkarte "Konsole". Einige von Ihnen werden vielleicht mit den Augen rollen, weil das alles so albern und offensichtlich erscheint, aber wir denken auch an die (Hunderte?) Tausende von Menschen da draußen, die (aus welchen Gründen auch immer) mit der Browserkonsole und JavaScript arbeiten.
• Klicken Sie auf die erste Zeile neben dem Cursor, woraufhin eine Eingabeaufforderung erscheint und Sie dort JavaScript-Code schreiben können (siehe den Screenshot etwas weiter unten).
• Jetzt müssen wir etwas JavaScript-Code schreiben. Keine Sorge, denn was Sie schreiben/tippen müssen, ist sehr kurz und einfach: document.designMode = "on". Sie können den Code auch von dieser Seite kopieren und einfügen (achten Sie in diesem Fall darauf, dass die Formatierung nicht kopiert wird - wir brauchen nur den reinen Text) oder, wenn Sie sich sicher fühlen, tippen Sie ihn ein.
• Drücken Sie Enter/Return.

Ja, das ist alles!

Jetzt können Sie die Seite so bearbeiten, als wäre sie ein Dokument. Sehen Sie sich dieses Beispielvideo an, in dem ich die Spotify-Website mit dem Designmodus live bearbeite

Die Funktion Designmodus, so aufregend sie auch ist, ist kein Allheilmittel. Sie können zum Beispiel keine Schaltflächen einfach kopieren und einfügen, ihr Aussehen ändern usw. Im Vergleich zu einem visuellen Webseiten-Editor ist die Anzahl der Möglichkeiten sehr gering. Allerdings bietet er eine Lösung für Anwendungsfälle, in denen Inhalte visuell und on-the-fly geändert werden müssen

Es ist auch nicht zu weit hergeholt zu behaupten, dass die Chrome-Leute testen, wie gut diese Funktion ankommt. Wenn sie gut ankommt und einen guten Anwendungsfall findet, kann man davon ausgehen, dass bald noch leistungsfähigere Bearbeitungsfunktionen folgen werden! 🤞🏻🤞🏻

Netzwerkbedingungen simulieren

Die Registerkarte Netzwerk in Chrome DevTools wird vielleicht am häufigsten verwendet (ich habe natürlich keine Daten darüber, aber als Webentwickler verwende ich die Registerkarte Konsole vielleicht 20-30% der Zeit und die Registerkarte Netzwerk den Rest der Zeit). Sie liefert uns alle möglichen Informationen über die von der Seite ausgehenden Anfragen, ihre Art, Metadaten/Kopfzeilen, den Status, den Download-Fortschritt von Assets (Bilder, Stylesheets usw.), Ladezeiten und so weiter. Bei einem so großen Nutzen ist es kein Wunder, dass die Registerkarte Netzwerk am häufigsten verwendet wird.

Und doch ist es einfach, die Funktion zu übersehen, die wir hier besprechen. Vielleicht haben Sie ein harmloses Dropdown-Feld nicht bemerkt, das das Offensichtliche sagt: Online

Wenn Sie darauf klicken, sehen Sie ein Dropdown-Menü mit verschiedenen Optionen, mit denen Sie die Netzwerkgeschwindigkeit drosseln können: Schnelles 3G, Langsames 3G, Offline, usw. Es gibt verschiedene Anwendungsfälle für diese Option, aber der häufigste ist das Testen der Website-Performance in langsamen Netzwerken oder des Verhaltens von Webanwendungen, wenn diese offline sind (vorausgesetzt, solche Funktionen wurden hinzugefügt)

Lassen Sie uns das mal ausprobieren. Ich stelle das Netzwerk auf "Langsam 3G" ein und lade dieselbe Seite aus dem vorherigen Screenshot erneut. Bevor ich das tue, sehen Sie auf dem vorherigen Screenshot, wie bei meiner aktuellen Netzwerkverbindung (40 Mbps Breitband) die meisten Assets in weniger als 100 Millisekunden heruntergeladen werden

Und jetzt sehen wir uns an, was langsames 3G damit macht

Was für ein Unterschied!

Beachten Sie, dass die Ladezeit für Assets jetzt im Bereich von 5-10 Sekunden liegt. Außerdem wurde die Website in 17,25 Sekunden vollständig geladen! Ja, ich weiß, was Sie denken, aber Sie müssen bedenken, dass in einem langsamen 3G-Netz jede moderne Website mehrere Sekunden zum Laden benötigt. Ob Sie schnelles Laden in langsamen Netzen wollen, ist eine andere Sache, aber alles in allem muss es eine geschäftliche Entscheidung sein, bei der der Gewinn den Aufwand rechtfertigt

Auf dem Screenshot oben sehen Sie das Warnsymbol auf der Registerkarte Netzwerk. Das ist die Art von Chrome, Sie daran zu erinnern, dass Sie eine nicht standardmäßige, dauerhafte Änderung vorgenommen haben, und wenn Sie nicht wissen, was Sie tun, sollten Sie sie vielleicht zurücksetzen

Interaktiver Farbwähler

Die Inspektion von DOM-Elementen in DevTools ist etwas, das wir alle so gut wie jeden Tag tun. Wir sind auch an den nebenstehenden Abschnitt mit den CSS-Details gewöhnt und wissen, dass wir ihn bearbeiten und die Ergebnisse sofort sehen können

Eine winzige Annehmlichkeit, die sich hinter all dem verbirgt, ist die Tatsache, dass, wenn Sie auf eine CSS-Farbeigenschaft klicken, eine vertraute Farbauswahloberfläche angezeigt wird!

Beachten Sie, dass es sich nicht um einen einfachen Farbwähler handelt. Sie können damit die Transparenz steuern, die verwendeten Farbsysteme ändern, eine Farbe direkt von der Seite auswählen und vieles mehr.

Wenn Sie also das nächste Mal mit den Akzentfarben einer Website experimentieren, müssen Sie den richtigen Wert für den von Ihnen gewünschten Farbton nicht erst ausrechnen oder erraten! Viele Leute entwerfen ihre Websites sogar direkt im Browser; für sie sind Funktionen wie diese ein Geschenk des Himmels 🙂.

Überwachung von Ereignissen auf Seitenelementen

Wir befinden uns oft in einer Situation, in der wir gerne wüssten, was mit dem einen bestimmten Element passiert, das uns interessiert. Das gilt vor allem, wenn Sie jQuery in einer nicht trivialen Codebasis verwenden - ob bei Ihnen oder bei anderen. Event-Handler und Logik sind überall verstreut, und das Aufspüren eines Fehlers kann ein Albtraum sein

Zum Glück haben die Chrome DevTools genau für diesen Fall eine raffinierte Funktion. Sie beobachtet das angezeigte Element für Sie und protokolliert die Ereignisse auf der Konsole. Allerdings gibt es einen kleinen Wermutstropfen: Diese Funktion verfügt nicht über die Möglichkeit, Elemente anhand von CSS-Klassennamen auszuwählen. Die jQuery-Methode $("#email") ist auch nicht verfügbar 🙂 .

Schauen wir uns auch an, wie es funktioniert. Wir beginnen mit einem einfachen "Element inspizieren" unter Verwendung des DevTools-Inspektors. Ja, es ist genau das gleiche Inspektionstool, das wir jeden Tag verwenden

Im folgenden Screenshot habe ich den Inspektor verwendet, um die Texteingabe zu markieren. Mit "hervorheben" meine ich nicht, dass das Element auf der Seite hervorgehoben ist (das ist es nicht, wie Sie sehen können). Vielmehr wurde der Inspektor-Cursor auf die Texteingabe geklickt, und der entsprechende HTML-Code in den DevTools wird hervorgehoben

Auf diese Weise wird das aktuell inspizierte Element für die Ereignisüberwachung ausgewählt, wodurch das Element als spezielle JavaScript-Variable mit dem Namen $0 zugänglich wird. Als Nächstes klicke ich auf die Konsole und füge einen Ereignis-Listener für diese Texteingabe hinzu, wobei ich darauf achte, dass ich nicht unvorsichtigerweise an anderer Stelle im Browserfenster klicke (insbesondere nicht auf den HTML-Code). Dazu brauche ich nur eine einzige Codezeile: monitorEvents($0, 'Maus'). Der "Maus"-Teil hier sagt Chrome, dass ich nur an mausbasierten Ereignissen interessiert bin.

Sobald ich Enter/Return drücke, wird die Überwachung aktiviert, und wenn ich jetzt mit dem Mauszeiger über die Texteingabe fahre oder darauf klicke, werden diese Ereignisse als JavaScript-Objekte auf der Konsole protokolliert.

Wie Sie auf dem Screenshot sehen können, wurden verschiedene Arten von Mausereignissen erfasst, als ich auf das Element klickte, meinen Namen eingab und dann die Maus wegzog (die Eingabeereignisse, die Tastaturereignisse sind, wurden nicht protokolliert). Bei den Ereignissen handelt es sich um JavaScript-Objekte, wie aus dem Screenshot ersichtlich ist; jedes Ereignisobjekt enthält eine enorme Menge an Informationen. Ich habe z.B. das Ereignisobjekt "Klick" erweitert, und die Anzahl der Eigenschaften konnte nicht alle in einen einzigen Screenshot passen!

Ich empfehle Ihnen, diese Funktion gleich auszuprobieren, denn sie wird Ihnen bei Ihren nächsten Projekten sicher viel Kopfzerbrechen ersparen!

Berichte zur Website-Leistung

Heutzutage entscheidet die Website-Leistung über Erfolg oder Misserfolg eines Unternehmens/einer Website. Selbst eine kleine Steigerung der Leistung führt zu massiven SEO-Gewinnen und zur Zufriedenheit der Benutzer. Aber woher wissen Sie, welche Teile Ihrer Website Aufmerksamkeit brauchen und welche bereits gut sind?

Müssen Sie ein Expertenteam engagieren und geduldig ein paar Tage warten?

Nun, es gibt Fälle, in denen dies notwendig ist, aber zum Glück haben die Chrome DevTools den Rest von uns abgedeckt. In den neuesten Versionen von Chrome (Ende 2020) finden Sie eine Registerkarte Leuchtturm in den DevTools. Vor ein paar Monaten hieß sie noch Audits, und verwirrenderweise ist das auch der Name, den Sie in den offiziellen Dokumenten finden, wenn Sie diesen Artikel schreiben. Wie dem auch sei, Lighthouse war früher eine angesagte Website zur kostenlosen Überprüfung der Website-Performance, aber dann wurde sie von Google abgeschaltet (ohne Angabe von Gründen). Glücklicherweise ist die gleiche leistungsstarke Funktionalität später in DevTools wieder aufgetaucht

Um einen Leistungsbericht zu erstellen, brauchen Sie nur auf eine einzige Schaltfläche zu klicken, nachdem die Seite, die Sie interessiert, geladen wurde.

Wie Sie auf der rechten Seite im Screenshot sehen können, gibt es einige Optionen, mit denen Sie steuern können, wie viele Informationen Sie wünschen (und natürlich, worauf Sie testen möchten). Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie auf die große blaue Schaltfläche, lehnen Sie sich zurück und entspannen Sie sich. Ein paar Sekunden später haben Sie einen nützlichen Bericht, der in etwa so aussieht

Die Zahlen, die Sie im obigen Screenshot sehen, zeigen die Gesamtpunktzahl für jede Kategorie. Die Kategorie für Progressive Webanwendungen (PWAs) ist ausgegraut, wahrscheinlich weil diese Website keine PWA-Funktionen hat. Wie Sie außerdem an der Größe der Bildlaufleiste im Screenshot (ganz rechts) erkennen können, ist der Bericht sehr lang

Hier sehen Sie, wie ein Teil des Abschnitts über die Leistung aussieht

Ich will nicht behaupten, dass Lighthouse und seine Vorschläge der heilige Gral der Website-Performance sind, aber sie sind äußerst hilfreich. Das liegt daran, dass Website-Besitzer und -Entwickler selten eine Ahnung davon haben, welche Probleme es gibt und wie genau man sie beheben kann

Ehrlich gesagt fühle sogar ich mich als Webentwickler verloren, da Performance und Testen eher eine Art Spezialisierung sind. Daher ist Lighthouse ein wenig bekanntes und unterschätztes Tool, das jetzt Teil der Chrome DevTools ist und sowohl für Geschäftsinhaber als auch für Entwickler/Systemadministratoren von großem Nutzen ist

Code-Bearbeitungsfähigkeiten

Über die Registerkarte Quellen in DevTools können wir auf verschiedene Dateien zugreifen, die von der Website geladen werden. Außerdem bietet sie Funktionen wie Codebearbeitung, Speichern von Snippets usw. Das dürfte für Webentwickler keine Überraschung sein. DevTools hat jedoch auch einige Annehmlichkeiten eingebaut, die Entwicklern, die an ihre bevorzugten Code-IDEs gewöhnt sind, das Leben erleichtern

DevTools verwendet einige bekannte Tastenkombinationen, mit denen Sie Zeit sparen und die Frustration bei der Codeeingabe minimieren können. So können Sie beispielsweise mit Strg D (oder Cmd D auf dem Mac) mehrere Vorkommen eines Wortes markieren. Wenn Sie die Strg-Taste (bzw. Cmd auf dem Mac) gedrückt halten und auf mehrere Stellen im Code klicken, erhalten Sie mehrere Cursor. Schauen Sie sich das Video unten an, um eine bessere Vorstellung zu bekommen

Wenn Sie das cool finden, sollten Sie sich die offiziellen Dokumente ansehen, um alle Codebearbeitungsfunktionen der DevTools nutzen zu können

DOM-Element-Status kontrollieren

Manchmal testen oder debuggen wir etwas, aber das Verhalten, das wir suchen, ist nur in einem bestimmten Elementstatus verfügbar. Je nachdem, um welchen Zustand es sich handelt, kann es für Sie sehr unangenehm werden. Bei mir ist es der "Hover"-Zustand, denn ich erinnere mich, dass ich unzählige Minuten damit vergeudet habe, die Hover-Aktion zu timen oder zusätzliches, temporäres CSS hinzuzufügen usw.

Zum Glück gibt es in den Chrome DevTools eine einfache Möglichkeit, den Status eines inspizierten Elements zu ändern. Die Option dazu finden Sie, wenn Sie mit der rechten Maustaste auf das Element klicken (auf der Registerkarte Elemente). Aber angesichts der vielen Funktionen und des Arbeitsdrucks kann man dies leicht übersehen

Ja, es ist wirklich so einfach!

Jetzt müssen Sie keine Logik für bedingte Tests in Ihren Code einbauen, kein zusätzliches CSS schreiben oder andere Hürden überwinden, wenn Sie ein Element in einem anderen Zustand beobachten.

Tools-Panel

Der letzte Punkt auf dieser Liste ist das Tools-Panel. Es ist eine weitere dieser unglaublich nützlichen Funktionen, die gut versteckt sind und nur über Tastenkombinationen aufgerufen werden können. Wie der Name schon sagt, handelt es sich bei dem Tools-Panel nicht um ein einzelnes Tool, sondern um eine Art Dashboard, auf dem fast alle Funktionen von DevTool verfügbar sind. Da es viel zu viele Funktionen gibt, die die Gesamtfunktionalität von DevTools bieten, ist eine Suchleiste ganz oben verfügbar

Um das Tools-Panel zu aktivieren, vergewissern Sie sich, dass Sie sich im DevTools-Panel befinden und drücken Sie dann Strg Umschalt P (oder Cmd Umschalt P für Mac-Benutzer)

Das Tools-Panel steckt voller Möglichkeiten und Überraschungen. Wussten Sie zum Beispiel, dass Sie direkt von den DevTools aus einen Screenshot machen können?

Ich wette, nicht, denn dazu müssten Sie das Tools-Bedienfeld aufrufen und "Screenshot" in die Suchleiste eingeben, um dies herauszufinden.

Sie werden auch mehrere Optionen für die Erstellung von Screenshots sehen, darunter eine für den ausgewählten DOM-Knoten! Schauen Sie sich das Tools-Bedienfeld genauer an, und ich versichere Ihnen, Sie werden nicht enttäuscht sein!

Wenn Sie aus der Ferne einen Screenshot von einer beliebigen Webseite machen möchten, sollten Sie sich das Geekflare Screenshot-Tool ansehen.

Fazit

Der Chrome-Browser selbst ist sehr funktionsreich, aber seine wahre Stärke sind die DevTools. Wie wir in diesem Artikel gesehen haben, gibt es eine ganze Reihe gut versteckter Funktionen - und andere, die den meisten Benutzern nicht bekannt sind. Warum sind diese Funktionen versteckt?

Ich vermute, dass einige von ihnen Sehr experimentell sind (wie der Designmodus) und die Chrome-Entwickler es normalen Benutzern schwer machen wollen, diese Funktionen zu finden. Bei den übrigen Funktionen handelt es sich meiner Meinung nach einfach um eine Informationsflut: Wenn es, sagen wir, 120 Funktionen gibt, von denen einige Unterfunktionen haben und so weiter, ist es so gut wie unmöglich, die richtige Benutzeroberfläche für ein solches Szenario zu entwerfen. Außerdem hat Google in der Vergangenheit keine besonders gute Arbeit bei der Benutzeroberfläche seiner Produkte geleistet, und das ist auch gut so. 🤷🏻‍♂️

Wie dem auch sei, ich hoffe, dass Sie einige dieser Funktionen nützlich fanden. Vor allem aber hoffe ich, dass dieser Artikel Ihnen ein Gefühl dafür vermittelt hat, was sich wo versteckt, so dass Sie beim nächsten Mal, wenn Sie etwas Bestimmtes erforschen oder suchen möchten, wissen, wo Sie "in die Tiefe gehen" müssen 😆.