Google Chrome DevTools für Nichtentwickler

Google Chrome gehört mit fast 65% der Nutzer weltweit zu den am häufigsten verwendeten Browsern. Und es gibt einen guten Grund dafür, es funktioniert gut, es unterstützt eine Menge Webfunktionen, lässt sich nativ in alles integrieren, was Google bietet, und es ist einfach zu bedienen.

Aber es gibt mehr als die Benutzerseite. Es ist auch für Entwickler sehr gut gebaut. Firefox ist ein weiterer großartiger Browser, der eine hervorragende Entwicklererfahrung bietet, obwohl seine Benutzerbasis relativ klein ist. Aus diesem Grund konzentrieren wir uns auf Chrome und seine DevTools, aber zum Glück bleibt die Benutzeroberfläche der meisten Browser sehr ähnlich, sodass die Tipps hier gut in Firefox, Safari, Edge und andere Browser übersetzt werden.

Was ist Chrome DevTools?

Chrome DevTools ist eine Reihe von Webentwickler-Tools, die direkt in den Google Chrome-Browser integriert sind. Mit DevTools können Sie Seiten im laufenden Betrieb bearbeiten und Probleme schnell diagnostizieren, wodurch Sie letztendlich schneller bessere Websites erstellen können.
Startseite der Chrome DevTools-Dokumente

Die DevTools werden von den meisten Front-End- (und häufig Back-End-) Entwicklern verwendet, um die Leistung einer Webseite, die sie definierenden HTML-Tags und die Stile, die in ihrer grundlegendsten Form angewendet werden, zu überprüfen. Es bietet eine Menge weiterer super hilfreicher Funktionen, die wir uns ansehen werden, solange sie im allgemeinen Anwendungsfall auch für Nicht-Entwickler funktionieren.

Die Entwicklungswerkzeuge sehen Sie im obigen Screenshot mit dem Code links und verschiedenen Eigenschaften rechts. Dies ist die Standardansicht, die angezeigt wird, wenn Sie Befehlstaste + Wahltaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux, Chrome OS) drücken.

DevTools bietet viele Funktionen, aber die bemerkenswertesten wären:

• Die generierte Dokumentstruktur (HTML) nach dem Laden der Seite und während des Ladens.
• Was CSS für bestimmte HTML-Elemente gilt und was von übergeordneten Elementen geerbt wird.
  Zeigen Sie die Größe des Ansichtsfensters, die Elementgrößen, Auffüllungen, Ränder, Ränder und mehr an.
• Die Möglichkeit, alles auf der Seite außer den ausgeführten Skripten zu ändern.
• Sie können keine Änderungen am Code vornehmen, die nach dem Aktualisieren der Seite gespeichert werden (standardmäßig jedoch nicht möglich).
• Alle Änderungen sind clientseitig - was auch immer Sie ändern, nur Sie sehen es, bis Sie die Seite aktualisieren.
• Ohne Caches und mit simulierter langsamerer Netzwerkgeschwindigkeit testen.
• Tools zum Messen der Leistung und zum Bewerten der Leistung einer Seite sowie Tipps zur Lösung.
• Zeigen Sie die Konsole der Seite und ihre Fehler, Warnungen und Meldungen sowie eine Möglichkeit, dort Javascript-Code auszuführen.

Dies ist eine sehr kurze Liste, die jedoch einige der bemerkenswertesten Funktionen abdeckt, hauptsächlich das, was wir behandeln werden.

Verwandte Themen : So erstellen Sie Ihre erste Chrome-Erweiterung

Warum brauchen Sie DevTools, was sind die Anwendungsfälle?

Für Entwickler ist es offensichtlich, aber was ist mit Nicht-Entwicklern? Nun, es gibt ein paar nette Tricks und Tipps, die Sie einem Power-User-Status näher bringen. Oft erkennen Websitebesitzer Probleme auf der Website, stellen ein oder zwei Fragen und erhalten manchmal einen Codeausschnitt zum „Einfügen“, um ein Problem zu beheben. Entwickler testen solche Snippets unter anderem, indem sie sie direkt auf die Entwicklertools anwenden. Auf diese Weise können Sie Ihren Entwicklern auch eine schöne Vorschau darüber geben, wie die Dinge aussehen sollen.

Wenden Sie den CSS-Code an

Die erste und häufigste Verwendung von DevTools ist das Ändern und Anwenden von CSS. CSS definiert, wie eine Seite aussieht, es ist Ästhetik. Dazu müssen Sie nur auf das Element zeigen, das Sie stylen möchten, mit der rechten Maustaste klicken und "inspizieren" auswählen.

Gleiches gilt für die meisten anderen Browser, obwohl der Text des Menüelements leicht variieren kann. Sobald Sie dies getan haben, werden die DevTools geöffnet und Sie können direkt das gewünschte Element auswählen. Dort sehen Sie die beiden Hauptteile der Entwicklungswerkzeuge. Die HTML- und CSS-Seiten (links und rechts):

Es könnte etwas schwierig sein, sich im HTML-Teil zurechtzufinden, aber keine Sorge, DevTools hebt die Elemente hervor, wenn Sie sie im linken Bereich bewegen. Sobald Sie gefunden haben, was Sie brauchen, können Sie rechts Stile schreiben. Es wurden bereits einige hinzugefügt. Ändern wir also den Hintergrund, um zu lesen und zu sehen, wie er aussieht:

Während der Eingabe werden die Stile auf der Seite sofort aktualisiert. Sie können hier jedes CSS schreiben und es wird genauso angewendet wie die Stile, die sich bereits auf der Seite befinden. Wenn Sie gegen Ende der Regeln (unter "Breite") drücken, werden neue Stile hinzugefügt. Oder Sie können sie oben schreiben, wo "element.style" steht. Wenn Sie dies dann Ihren Entwicklern mitteilen möchten, können Sie einfach den Code auswählen und kopieren und einfügen. Profi-Tipp, greifen Sie auch zum „Selektor“ für die Stile. Dies ist die ".RNNXgb" im obigen Screenshot. Dadurch erfahren die Entwickler, zu welchem ​​Element Sie Stile hinzufügen.

Verwandte : WordPress CSS: Grundlegende Anleitung für Anfänger

Wähle eine Farbe

Sie können auch herausfinden, welche Farbe genau verwendet wird, und einen Farbwähler direkt aus den DevTools verwenden, um andere Farben anzuzeigen. Klicken Sie einfach auf das Quadrat neben dem Farbcode (wo der Pfeil oben zeigt) und es öffnet sich ein Farbwähler.

Finden Sie heraus, welche Schriftart verwendet wird

CSS-Entwickler definieren auch die verwendeten Schriftarten, die Schriftgröße, die Zeilenhöhe, die Farbe, das Schriftgewicht und andere typografiebezogene Eigenschaften. Alle von ihnen würden auf der rechten Seite angezeigt. Solange es nicht gekreuzt ist, wird der angezeigte Stil angewendet. Lassen Sie uns herausfinden, welche Schriftart für die Suche im Google-Formular verwendet wird. Klicken Sie mit der rechten Maustaste, überprüfen Sie und scrollen Sie nach unten, bis Sie die Schriftart sehen, oder suchen Sie einfach im Feld "Filter" oben oben im rechten Bereich:

Wenn Sie fortfahren und die Schriftart aktualisieren, werden Sie sehen, wie die Site mit einer anderen Schriftart aussehen würde, zu der Sie möglicherweise bald wechseln möchten. Natürlich muss ein Entwickler später den Code ändern und alle Probleme beheben, die durch eine Änderung der Schriftart entstehen würden. Diese Methode eignet sich jedoch hervorragend, um Dinge schnell zu testen, ohne dass eine Entwicklungsumgebung festgelegt ist.

So würde die Google-Startseite aussehen, wenn "Georgia" als Schriftart festgelegt ist. Um dies zu erreichen, mussten wir mehr als eine Eigenschaft aktualisieren, aber dank der guten CSS-Architektur der Google-Entwickler war dies ziemlich einfach. In den meisten Fällen müssen Sie für eine schlecht geschriebene Site eine Menge Eigenschaften aktualisieren, damit die gesamte Site aktualisiert wird.

Verwandte Themen : So wählen Sie die besten Schriftarten für Ihre Website aus

Cache, Gas und Geschwindigkeit

Was ist Cache? Im einfachsten Fall eine Ressource, die für die zukünftige Verwendung auf Ihrem Computer gespeichert wird. Eine Ressource kann JS, CSS-Datei oder ein Bild sein. Wenn es sich nicht jedes Mal ändert, wenn Sie eine Seite öffnen, müssen Sie es nicht jedes Mal herunterladen, oder? Der Browser behält es also einfach eine Weile auf Ihrem Computer.

Aber was passiert, wenn sich auf dem Server etwas geändert hat und das Setup keine Best Practices zum Aktualisieren der Ressourcen verwendet? Kurz gesagt, selbst wenn die Entwickler die Codebasis geändert haben, sehen Sie immer noch alte Stile. Dann können Sie einfach den Cache stoppen und eine „harte Aktualisierung“ durchführen.

Öffnen Sie die Entwicklertools und navigieren Sie zur Registerkarte "Netzwerk". Klicken Sie dann auf "Cache deaktivieren" und führen Sie eine "harte Aktualisierung" durch:

Während Sie Seiten mit geöffneten DevTools durchsuchen, werden in Ihrem Browser keine Ressourcen zwischengespeichert. Seiten werden langsamer geladen, da jedes Mal Ressourcen geladen werden, aber Sie werden die Änderungen sehen. Im Allgemeinen lassen Entwickler "Cache deaktivieren" standardmäßig aktiviert und deaktivieren ihn nur, wenn echte Benutzerinteraktionen getestet werden, wenn Ladezeiten wichtig sind.

Auf derselben Registerkarte werden nach dem erneuten Aktualisieren auch Messungen der Seitengeschwindigkeit und des Seitengewichts angezeigt. Wie lange dauert es, bis das „Laden“ ausgelöst wird (Ereignis, wenn andere Skripte angehängt werden, um mehr Arbeit zu erledigen), wie viele Dateien werden angefordert (31 Anforderungen oben, ziemlich viel), wie viel wurde heruntergeladen und so weiter. Es ist einfach, je niedriger desto besser für jeden Wert. Bei mehr als 100-150 Anfragen treten große Geschwindigkeitsprobleme auf.

DevTools bietet auch eine Simulation der langsamen Verbindung. Eine sehr hilfreiche Funktion, um zu sehen, wie Ihre Site in einem langsameren Netzwerk wie 3G funktioniert. Um es einzuschalten, ändern Sie einfach den Wert neben "Cache deaktivieren" und klicken Sie auf "Aktualisieren". Wenn Sie aktualisieren, sehen Sie jeden Schritt des Ladens der Site. Wenn der Cache deaktiviert ist, ist dies der erste Besuch für die regelmäßige Verwendung.

Sehen Sie den Geschwindigkeitsunterschied, wenn Sie "Slow 3G" auswählen und aktualisieren, im Vergleich zum ersten Beispiel, das die tatsächliche Verbindungsgeschwindigkeit verwendet. Hier können Sie auch „Offline“ testen - wie würde die Site ohne Internetverbindung funktionieren? Wenn das seltsam klingt, ist es nicht so, dass progressive Web-Apps es Websites bereits ermöglichen, auch ohne Internetverbindung zu funktionieren, wenn die Besucher mindestens einmal auf sie zugegriffen haben.

Audits sind eine weitere großartige Funktion, die eine benutzerfreundliche Geschwindigkeitsanalyse einer Seite ermöglicht. Sie können es einfach ausführen, indem Sie zu den Registerkarten "Audits" gehen und auf "Bericht erstellen" klicken:

Auf der rechten Seite haben Sie einige Optionen, um zu entscheiden, was getestet werden soll, da die Tests manchmal eine Weile dauern können (ein oder zwei Minuten). Wenn Sie sie also häufig ausführen, können Sie genau das auswählen, was für den aktuellen Test benötigt wird . Hier ist ein Beispielergebnis mit den oben genannten Optionen für den Startbildschirm von Google:

Eine tolle Punktzahl! 94 ist sehr gut und zeigt die großartige Arbeit, die auf dieser Seite geleistet wurde. Denken Sie daran, dass es auf der Oberfläche sehr einfach aussehen mag, aber im Hintergrund laufen eine Menge Skripte, die verborgen bleiben und Websites verlangsamen. Es wurden viele andere Metriken getestet, und Sie können dies auf jeder Website tun, um herauszufinden, welche Probleme es gibt und was verbessert werden kann.

Verwandte Themen : Was bedeutet "Beschleunigen Ihrer Website" wirklich und wie kann dies erreicht werden?

DevTools-Konsole

Die letzte Ansicht, die wir behandeln werden, ist die Konsole. Einfacher Zugriff durch einfaches Drücken der ESC-Taste oder Aufrufen der Registerkarte „Konsole“. Wie erwartet gibt es keine Fehler, nur ein paar Warnungen, die nicht zu viele Probleme aufwerfen sollten:

Wenn jedoch aus irgendeinem Grund nach einem kürzlich durchgeführten Update auf Ihrer Website eine interaktive Komponente (wie Dropdown, Menü, Karte, Formular) nicht mehr funktioniert, können Sie jederzeit einen Blick auf die Konsole werfen. Es kann Fehler geben, die den Grund angeben.

Hier ist ein Beispiel, wie ein solcher Fehler aussehen würde:

Es ist ein bisschen ironisch, die Dokumentationsseite für Fehlerprotokolle zu verwenden, um Fehler zu präsentieren, oder? In jedem Fall dient es einem guten Zweck. Dies sind Fehler, die dazu führen würden, dass einige Funktionen nicht mehr funktionieren. Sie können solche Informationen jederzeit mit Ihren Entwicklern teilen und um Unterstützung bitten. Protokolle werden live gepostet, während Sie mit der Seite interagieren. Wenn Sie also auf eine Schaltfläche klicken und ein Fehler angezeigt wird, hat das dahinter stehende Skript höchstwahrscheinlich ein Problem.

Verwandte : Der Weg zu einem guten Webdesigner

Sicherheitshinweis : Es ist keine gute Idee, Code in die Konsole zu kopieren und einzufügen, ohne zu verstehen, was er tut. Insbesondere, wenn es aus einer unzuverlässigen Quelle stammt und in internen Anwendungen / Websites Ihres Unternehmens verwendet wird. Facebook hat aus diesem Grund eine Warnung auf seiner Konsole veröffentlicht:

Zusammenfassung

DevTools ist ein erstaunliches Tool, das sowohl Entwicklern als auch Websitebesitzern hilft. Sie erhalten alles, was Sie zum Optimieren und Ändern einer Seite benötigen. Dadurch können Sie CSS ändern, HTML ändern, Elemente auf der Seite löschen und neu anordnen, Geschwindigkeitsberichte anzeigen und Fehler melden.

Websitebesitzer können damit Entwicklern Ideen und Beispiele ihrer Bedürfnisse vorstellen, die möglicherweise leichter zu verstehen sind als das Schreiben von Textabschnitten. Mit einigen CSS-Kenntnissen der grundlegenden Eigenschaften können Sie Ihre Anforderungen viel genauer beschreiben, wodurch das Hin und Her und der Zeitaufwand für neue Änderungen erheblich reduziert werden.

Es gibt eine Menge anderer Funktionen, die darauf warten, verwendet zu werden. Haben Sie keine Angst, sie zu erkunden!