Die Chrome DevTools sind einer der Hauptgründe, warum Entwickler sich weigern, andere Browser anzufassen.
Aber die meisten von uns verwenden nur eine Handvoll Funktionen und bleiben blind für viele weitere atemberaubende Funktionen, die stillschweigend veröffentlicht werden.
Lassen Sie uns einige dieser verborgenen Schätze aufdecken!
Jeder hat sein Lieblingsbetriebssystem, seine Hardwareplattform, seinen Gerätetyp, seinen Geräteformfaktor usw. Aber eines ist allen gemeinsam – sie verwenden den Chrome-Browser und nur den Chrome-Browser! Ich denke, man kann mit Sicherheit sagen, dass die Browserkriege 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. Das Gleiche gilt für Apples Geräte (insbesondere MacBooks und Geräte mit größerem Bildschirm), bei denen Benutzer und Entwickler Safari trotz der vielen starken Behauptungen und Konvertierungstaktiken von Apple meiden.
Und wenn auf einem Gerät Chrome nicht ausgeführt wird, ist die Wahrscheinlichkeit hoch, dass darauf ein Chrome-kompatibles Spinoff ausgeführt wird, z Tapfer oder Vivaldi. Ja, ich weiß, technisch gesehen basieren diese Browser nicht auf Chrome, aber das ist eine andere Diskussion. Der durchschnittliche Benutzer verwendet diese anderen Browser möglicherweise aus ideologischen oder besonderen Gründen, aber wenn es um Entwickler geht, ist außer Chrome kein anderer Browser in Sicht.
Sogar die Tatsache, dass es sich um ein speicherfressendes Monster handelt, wird ignoriert. Der Grund ist einfach: Chrome-Entwicklungstools.
Bildquelle: Offizielle Chrome DevTools-Dokumentation
Wenn Sie diesen Artikel lesen, können Sie davon ausgehen, dass Sie entweder ein Power-User, ein Tüftler, ein Webentwickler oder etwas Ähnliches sind. Daher benötigt keiner 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.
Inhaltsverzeichnis
Designmodus
Eines der Dinge, die Entwickler routinemäßig tun, ist, ein Element auf der Seite zu untersuchen und dann seinen HTML-Code zu ändern, um eine Vorschau anzuzeigen oder die Auswirkung einer Änderung zu testen.
Die Arbeit mit HTML direkt in den DevTools ist jedoch nicht die reibungsloseste Sache aller Zeiten – durch die Tag-Suppe zu waten, Ihre Augen anzustrengen, um die richtige öffnende/schließende Klammer zu finden, und beim Bearbeiten von Text mit einer lächerlichen Menge an Leerzeichen umzugehen (Leerzeichen, die fehlt eindeutig in dem Dokument, das Sie sehen), sind einige der Probleme, mit denen Sie sich möglicherweise befassen müssen. Noch schlimmer ist es, wenn Sie ein Designer sind und das Chaos nicht durchsehen möchten.
Hier ist ein Screenshot von einer der Seiten dieser Website (wdzwdz):
Das tief verschachtelte HTML und die mysteriösen, verwirrenden CSS-Klassen sind typisch für jede nicht triviale Website von heute, wo die Erfahrung mit DevTools, gelinde gesagt, suboptimal ist. 🤭
Aber es gibt eine DevTools-Funktion namens Design Mode, die den Schmerz in vielen Fällen lindern kann. Wenn Sie den Design-Modus verwenden (das ist übrigens nicht der offizielle Name; es ist nur der Name, den die Leute ihm gegeben haben, weil er aktiviert wird und was er tut – keine Sorge, wir werden sehr bald sehen!), Änderungen an der Seite kann visuell und live erstellt werden, genau wie beim Bearbeiten einer Tabellenkalkulation oder eines Texteditors! Der einzige Haken ist, dass diese Funktion standardmäßig nicht aktiviert ist und die Aktivierung ein bisschen Kopfschmerzen bereitet, insbesondere für Nicht-Entwickler.
In jedem Fall ist dies ganz einfach; Alles, was Sie tun müssen, ist die folgenden Anweisungen zu befolgen. Je nachdem, wo Sie sich auf der Benutzerentwicklungskurve befinden, kann dies lächerlich einfach oder mäßig schwierig sein. Folgendes ist zu tun:
- Stellen Sie sicher, dass die Webseite, die Sie bearbeiten möchten, geladen ist und Sie sie gerade ansehen (das heißt, die betreffende Registerkarte ist die aktive).
- Öffnen Sie das DevTools-Bedienfeld wie gewohnt (Tastenkombination, Mausklicks usw.). Ich verwende gerne Tastenkombinationen, und auf dem Mac erledigt Opt + Cmd + I die Arbeit.
- Gehen Sie nun bei geöffneten DevTools zur Registerkarte „Konsole“. Einige von Ihnen werden vielleicht mit den Augen rollen, wie albern und offensichtlich das alles scheint, aber hey, denken wir auch an die (Hundert?) Tausende von Menschen da draußen, die Schwierigkeiten haben, mit der Browserkonsole und JavaScript zu arbeiten (aus welchen Gründen auch immer). ).
- Klicken Sie auf die erste Zeile neben dem Cursor, es erscheint dann eine Eingabeaufforderung, und jetzt können Sie dort JavaScript-Code schreiben (siehe Screenshot etwas weiter unten).
- Jetzt müssen wir etwas JavaScript-Code schreiben. Machen Sie sich keine Sorgen, denn was Sie schreiben/tippen müssen, ist sehr kurz und unkompliziert: document.designMode = „on“. Sie können den Code auch von dieser Seite kopieren und einfügen (wenn Sie dies tun, stellen Sie sicher, dass die Formatierung nicht kopiert wird – wir benötigen nur einfachen Text) oder wenn Sie sich sicher fühlen, tippen Sie ihn aus.
- Drücken Sie die Eingabetaste/Return.
„Das ist es??!“
Ja, das ist alles!
Jetzt können Sie die Seite frei bearbeiten, als wäre es ein Dokument. Sehen Sie sich dieses Beispielvideo an, in dem ich die Spotify-Website im Designmodus live bearbeite:
Die Designmodus-Funktion, so spannend sie auch ist, ist keine Wunderwaffe; Sie können beispielsweise Schaltflächen nicht einfach kopieren und einfügen, ihr Aussehen ändern usw. Die tatsächliche Anzahl der Dinge, die es tun kann, ist im Vergleich zu einem visuellen Webseiten-Editor der Träume sehr gering; Es löst jedoch Anwendungsfälle, in denen Inhalte visuell und im laufenden Betrieb geändert werden müssen.
Allerdings ist es nicht zu weit hergeholt zu behaupten, dass die Chrome-Leute testen, wie gut diese Funktion angenommen wird; Wenn es guten Empfang und einen starken Anwendungsfall findet, ist zu erwarten, dass bald leistungsstärkere Bearbeitungsfunktionen folgen werden! 🤞🏻🤞🏻
Simulieren von Netzwerkbedingungen
Die Registerkarte „Netzwerk“ in Chrome DevTools ist vielleicht die am häufigsten verwendete (ich habe natürlich keine Daten darüber, aber als Webentwickler neige ich dazu, die Registerkarte „Konsole“ vielleicht 20-30 % der Zeit zu verwenden, und die den Rest der Zeit auf der Registerkarte Netzwerk). Es gibt uns alle möglichen Informationen über die Anfragen, die von der Seite gestellt werden, deren Typ, Metadaten/Header, Status, Download-Fortschritt von Assets (Bilder, Stylesheets usw.), Ladezeiten und so weiter. Bei solch unglaublicher Nützlichkeit ist es kein Wunder, dass die Registerkarte Netzwerk am häufigsten verwendet wird.
Und doch ist es einfach, die Funktion, über die wir sprechen, zu übersehen; Sie haben vielleicht ein harmloses Dropdown-Menü nicht bemerkt, das das Offensichtliche besagt: 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. Obwohl es verschiedene Anwendungsfälle für diese Option geben kann, ist der häufigste das Testen einer Website Leistung in langsamen Netzwerken oder Verhalten von Web-Apps im Offline-Modus (vorausgesetzt, solche Funktionen wurden hinzugefügt).
Nehmen wir das für eine Runde. Ich stelle das Netzwerk auf „Slow 3G“ und lade dieselbe Seite aus dem vorherigen Screenshot neu. Bevor ich das tue, beachten Sie im vorherigen Screenshot, wie bei meiner aktuellen Netzwerkverbindung (40 Mbit/s Breitband) die meisten Assets in weniger als 100 Millisekunden heruntergeladen werden.
Und jetzt ist es an der Zeit zu sehen, was langsames 3G damit macht.
Was für ein Unterschied!
Beachten Sie, dass die Ladezeit für Assets jetzt im Bereich von 5 bis 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 jede moderne Website in einem langsamen 3G-Netzwerk mehrere Sekunden zum Laden braucht. Ob Sie schnelles Laden in langsamen Netzwerken wünschen, ist eine andere Sache, aber alles in allem muss es eine geschäftliche Entscheidung sein, bei der die Gewinne den Aufwand rechtfertigen.
Beachten Sie im obigen Screenshot das Warnsymbol auf der Registerkarte Netzwerk. Auf diese Weise erinnert Chrome Sie daran, 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
Das Untersuchen von DOM-Elementen in DevTools ist etwas, was wir alle fast jeden Tag tun. Wir sind auch an den nebenstehenden Abschnitt mit den CSS-Details gewöhnt, und wir wissen, dass wir ihn bearbeiten und die Ergebnisse sofort sehen können.
Eine winzige Annehmlichkeit, die unter all dem versteckt ist, ist, dass, wenn Sie auf eine CSS-Farbeigenschaft klicken, eine vertraute Farbauswahl-Oberfläche erscheint!
Beachten Sie, dass es sich nicht um einen einfachen Farbwähler handelt. Sie können damit die Transparenz steuern, verwendete Farbsysteme ändern, eine Farbe direkt von der Seite auswählen und vieles mehr.
Wenn Sie also das nächste Mal beispielsweise mit den Akzentfarben einer Website experimentieren, müssen Sie den richtigen Wert für den Farbton, den Sie sich vorstellen, nicht ausrechnen oder erraten! Tatsächlich gestalten viele Menschen Websites gerne direkt im Browser; Für sie sind Features wie diese ein Glücksfall! 🙂
Überwachung von Ereignissen auf Seitenelementen
Wir befinden uns oft in einer Situation, in der wir gerne wüssten, was mit diesem einen bestimmten Element los ist, an dem wir interessiert sind. Dies gilt insbesondere, wenn jQuery in einer nicht trivialen Codebasis verwendet wird – egal ob Ihre oder die anderer; Event-Handler und Logik sind überall verstreut, und das Aufspüren eines Fehlers kann ein Alptraum sein.
Zum Glück hat Chrome DevTools genau dafür eine raffinierte Funktion. Es beobachtet das angegebene Element für Sie und protokolliert die Ereignisse in der Konsole. Aber es gibt eine kleine Enttäuschung: Diese Funktion verfügt nicht über Elementauswahlfunktionen basierend auf CSS-Klassennamen. Der jQuery-Weg von $(“#email”) ist also nicht verfügbar. 🙂
Lassen Sie uns sehen, wie es funktioniert. Wir beginnen mit einem einfachen „Element untersuchen“ mit dem DevTools-Inspektor. Ja, es ist dasselbe Inspektionstool, das wir jeden Tag verwenden.
Im Screenshot unten habe ich das Inspektor-Tool verwendet, um die Texteingabe hervorzuheben. Mit „hervorheben“ meine ich nicht, dass das Element auf der Seite hervorgehoben wird (ist es nicht, wie Sie sehen können); Stattdessen wurde mit dem Inspektor-Cursor auf die Texteingabe geklickt, und der entsprechende HTML-Code in den DevTools wird hervorgehoben.
Dies zielt auf das aktuell untersuchte Element für die Ereignisüberwachung ab, wodurch das Element als spezielle JavaScript-Variable namens $0 zugänglich wird. Als Nächstes vergewissere ich mich, dass ich nicht achtlos an anderer Stelle im Browserfenster klicke (insbesondere auf den HTML-Code-Teil), klicke auf die Konsole und hänge einen Ereignis-Listener für diese Texteingabe an. Dafür brauche ich nur eine einzige Codezeile: monitorEvents($0, ‚mouse‘). Der „Maus“-Teil hier teilt Chrome mit, dass ich nur daran interessiert bin, auf mausbasierte Ereignisse zu achten.
Sobald ich Enter/Return drücke, wird die Überwachung aktiviert, und wenn ich jetzt mit der Maus über die Texteingabe fahre oder darauf klicke, werden diese Ereignisse als JavaScript-Objekte in der Konsole protokolliert:
Wie Sie im Screenshot sehen können, wurden mehrere Arten von Mausereignissen erfasst, als ich auf das Element klickte, meinen Namen eintippte und dann die Maus wegbewegte (die Tippereignisse, da es sich um Tastaturereignisse handelt, wurden nicht protokolliert). Die Ereignisse sind selbst JavaScript-Objekte, wie aus dem Screenshot hervorgeht; Jedes Ereignisobjekt enthält eine enorme Menge an Informationen. Zum Beispiel habe ich das „Klick“-Ereignisobjekt erweitert, und die Anzahl der Eigenschaften passte nicht alle in einen einzigen Screenshot!
Ich empfehle Ihnen dringend, diese Funktion sofort auszuprobieren, da sie Ihnen bei Ihren anstehenden Projekten sicher viele Kopfschmerzen ersparen wird!
Berichte zur Website-Leistung
Heutzutage macht oder bricht die Website-Performance ein Unternehmen/eine Website. Selbst eine kleine Leistungssteigerung führt zu massiven SEO-Gewinn sowie Benutzerzufriedenheit. Aber woher wissen Sie, welche Teile Ihrer Website Aufmerksamkeit benötigen und welche bereits gut sind?
Müssen Sie ein Expertenteam einstellen und einige Tage geduldig warten?
Nun, es gibt Fälle, in denen das getan werden muss, aber zum Glück deckt Chrome DevTools den Rest von uns ab. In den neuesten Versionen von Chrome (Ende 2020) finden Sie in den DevTools eine Lighthouse-Registerkarte. Vor ein paar Monaten hieß es Audits, und verwirrenderweise ist das der Name, den Sie zum Zeitpunkt des Schreibens in den offiziellen Dokumenten finden werden. Wie auch immer, der Punkt ist, dass Lighthouse früher eine trendige Website war, um die Website-Performance kostenlos zu überprüfen, aber dann wurde sie von Google entfernt (ohne Angabe von Gründen). Glücklicherweise tauchte die gleiche leistungsstarke Funktionalität später in DevTools wieder auf.
Um einen Leistungsbericht zu erstellen, müssen Sie nur eine einzige Schaltfläche drücken, nachdem die Seite, die Sie interessiert, geladen wurde:
Wie Sie auf der rechten Seite im Screenshot sehen können, gibt es einige Optionen, um zu steuern, wie viele Informationen Sie möchten (und natürlich, was Sie testen möchten). Wenn Sie mit den Einstellungen zufrieden sind, drücken Sie den großen blauen Knopf, 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 Web Apps (PWAs) ist ausgegraut, wahrscheinlich weil diese Website keine PWA-Fähigkeiten hat. Wie Sie auch an der Größe der Bildlaufleiste im Screenshot (ganz rechts) erkennen können, handelt es sich um einen langen Bericht.
So sieht ein Teil des Abschnitts zur Leistung aus:
Ich werde nicht behaupten, dass Lighthouse und seine Vorschläge der heilige Gral der Website-Performance sind, aber diese sind äußerst hilfreich; Das liegt daran, dass Website-Eigentümer und -Entwickler selten eine Ahnung haben, welche Probleme bestehen und wie sie genau angegangen werden können.
Ehrlich gesagt fühle ich mich als Webentwickler verloren, da Leistung und Testen in der Regel eine Art Spezialisierung sind. Als solches ist Lighthouse ein wenig bekanntes, unterschätztes Tool, das jetzt Teil der Chrome DevTools ist und von großem Nutzen für Geschäftsinhaber und Entwickler/Systemadministratoren gleichermaßen ist.
Code-Bearbeitungsfähigkeiten
Über die Registerkarte Quellen in DevTools können wir auf verschiedene Dateien zugreifen, die von der Website geladen werden. Es hat auch Funktionen wie Codebearbeitung, Speichern von Snippets usw. Dies sollte Webentwickler nicht überraschen. DevTools verfügt jedoch auch über einige integrierte Annehmlichkeiten, 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 beim Code-Wrangling minimieren. Beispielsweise kann Strg + D (oder Cmd + D auf dem Mac) verwendet werden, um mehrere Vorkommen eines Wortes hervorzuheben. In ähnlicher Weise erhalten Sie mehrere Cursor, wenn Sie Strg (oder Cmd auf dem Mac) gedrückt halten und an mehreren Stellen im Code klicken. Schauen Sie sich das Video unten an, um eine bessere Vorstellung zu bekommen:
Wenn Sie das für cool halten, sollten Sie unbedingt in die offizielle Dokumentation eintauchen, um alle Codebearbeitungsfeatures zu nutzen, die die DevTools zu bieten haben.
Kontrollieren Sie den Zustand des DOM-Elements
Manchmal testen oder debuggen wir etwas, aber das gesuchte Verhalten ist nur in einem bestimmten Elementzustand verfügbar. Je nachdem, in welchem Zustand es sich befindet, könntest du am Ende eine schreckliche Zeit haben; Für mich ist es der „Hover“-Zustand, da ich mich erinnere, unzählige Minuten damit verschwendet zu haben, die Hover-Aktion zu timen oder zusätzliches, temporäres CSS hinzuzufügen usw.
Glücklicherweise bietet Chrome DevTools eine einfache Möglichkeit, den Status eines geprüften Elements zu ändern. Darüber hinaus haben wir die Möglichkeit, dies zu tun, wenn wir mit der rechten Maustaste auf das Element klicken (auf der Registerkarte „Elemente“), aber angesichts der Anzahl der Funktionen und des Arbeitsdrucks eines Tages kann dies leicht übersehen werden:
Ja, es ist wirklich so einfach!
Jetzt müssen Sie keine bedingte Testlogik in Ihren Code einbauen, zusätzliches CSS schreiben oder durch irgendwelche anderen Reifen springen, wenn Sie ein Element in einem anderen Zustand beobachten.
Bedienfeld „Werkzeuge“.
Last but not least auf dieser Liste ist das Werkzeugfenster. Es ist eine weitere dieser unglaublich nützlichen Funktionen, die gut versteckt sind und nur mit Tastaturkürzeln sichtbar sind. Wie der Name schon sagt, ist das Tools-Bedienfeld kein einzelnes Tool, sondern eine Art Dashboard, in dem fast alle Funktionen von DevTool verfügbar sind. Da es viel zu viele Funktionen gibt, die die gesamte DevTools-Funktionalität anbieten, ist ganz oben eine Suchleiste verfügbar.
Stellen Sie zum Aktivieren des Tools-Bedienfelds sicher, dass Sie sich im DevTools-Bedienfeld befinden, und drücken Sie dann Strg + Umschalt + P (oder Cmd + Umschalt + P für Mac-Benutzer):
Das Bedienfeld „Werkzeuge“ steckt voller Funktionen und Überraschungen. Wussten Sie zum Beispiel, dass Sie direkt aus den DevTools einen Screenshot machen können?
Ich wette nicht, denn Sie müssten das Werkzeugfenster starten und „Screenshot“ in die Suchleiste eingeben, um das aufzudecken:
Sie werden auch mehrere Optionen zum Aufnehmen von Screenshots bemerken, darunter eine für den ausgewählten DOM-Knoten! Erkunden Sie das Tools-Panel mehr, und ich versichere Ihnen, Sie werden nicht enttäuscht sein!
Wenn Sie aus der Ferne einen Screenshot einer Webseite machen müssen, sehen Sie sich das wdzwdz Screenshot-Tool an.
Fazit
Der Chrome-Browser selbst ist reich an Funktionen, aber wo er wirklich glänzt, ist das DevTools-Angebot. Wie wir in diesem Artikel gesehen haben, gibt es einige gut versteckte Funktionen – und andere, die sich in der Öffentlichkeit verstecken –, von denen die große Mehrheit der Benutzer nichts weiß. Warum sind diese Funktionen ausgeblendet?
Ich vermute, dass einige davon sehr experimentell sind (z. B. der Designmodus), und die Chrome-Entwickler möchten es normalen Benutzern schwer machen, diese Funktionen zu finden. Was den Rest der vielen Funktionen angeht, glaube ich, dass es einfach ein Fall von Informationsüberflutung ist: Wenn es beispielsweise 120 Funktionen gibt, von denen einige Unterfunktionen haben und so weiter, ist es ziemlich unmöglich, die richtige Benutzeroberfläche dafür zu entwerfen ein Szenario. Außerdem hat Google in der Vergangenheit keine großartige Arbeit mit der UX seiner Produkte geleistet, also das war’s. 🤷🏻♂️
Unabhängig davon hoffe ich, dass Sie einige dieser Funktionen nützlich fanden. Aber was noch wichtiger ist, ich hoffe, dass dieser Artikel Ihnen ein Gefühl dafür gegeben hat, was sich wo versteckt, damit Sie das nächste Mal, wenn Sie etwas Bestimmtes erkunden oder suchen möchten, wissen, wo Sie „tief graben“ müssen. 😆