kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Die Chrome Entwicklertools (DevTools) für Designer und Einsteiger

Alle modernen Browser verfügen über sog. Entwicklertools (Developer-Tools bzw. Dev-Tools), die zahlreiche Funktionen zum Gestalten, Editieren, Testen, Analysieren und Korrigieren von Websites und Web-Applications bereitstellen. Neben Frontend-Entwicklern nutzen auch Screen-, UX- und UI-Designer zunehmend die Dev-Tools um visuelle oder inhaltliche Anpassungen direkt an der Website testen zu können.

Wir fassen in den folgenden Abschnitten die wichtigsten Funktionen der Chrome Entwicklertools für Designer und Einsteiger zusammen. Für Entwickler bietet sich die offizielle und sehr umfangreiche Dokumentation an.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Entwicklertools öffnen

Um die Chrome-Entwicklertools zu öffnen, genügt ein Rechtsklick auf einer beliebigen Website. Im Kontextmenü findet sich der Eintrag »untersuchen«, der die Tools einblendet.

Screenshot von kulturbanause.de mit eingeblendetem Kontextmenü zum Öffnen der DevTools

Sollte der Rechtsklick nicht funktionieren kann alternativ auch über das Chrome-Menü navigiert werden. Der Punkt findet sich unter »Anzeigen → Entwickler → Entwicklertools«. Auch mit dem Tastaturkürzel Cmd+Option+I (Mac) oder Strg+Shift+I (Windows) lassen sich die Tools öffnen.

Überblick und Aufbau der Chrome Developer-Tools

Die Entwicklertools öffnen sich standardmäßig rechts, was allerdings konfiguriert werden kann (s.u.). Im oberen Bereich der Tools wird unter dem Tab »Elemente« der HTML-Code angezeigt. Darunter im Tab »Style« der CSS-Code zum jeweils ausgewählten HTML-Element. Mit ESC öffnet und schließt sich ein dritter Bereich, der standardmäßig im Tab »Console« JavaScript zeigt. Der Bereich ist für die folgenden Erklärungen nicht relevant und kann geschlossen werden.

Screenshot der geöffneten DevTools mit den Bereichen zum Editieren von HTML, CSS und JavaScript
Unterteilung der Entwicklertools in Sinnabschnitte. Oben HTML (orange hervorgehoben), in der Mitte CSS (blau hervorgehoben), unten JavaScript (gelb hervorgehoben).

Die Entwicklertools positionieren

Oben rechts in der Ecke finden sich drei kleine Punkte hinter denen weitere Einstellungen verborgen sind. Unter anderem kann das »Dock« mit der Codeansicht unten, links oder in einem eigenen Fenster positioniert werden.

Screenshot der DevTools mit geöffneten Optionen
Über die Optionen der DevTools kann das »Dock« positioniert werden

Wenn die Tools unten positioniert werden, wird standardmäßig HTML links und CSS rechts angezeigt.

Screenshot der DevTools mit unten positioniertem Dock und hervorgehobenen Bereichen für HTML und CSS
Anordnung der Bereiche HTML (orange hervorgehoben) und CSS (blau hervorgehoben) bei unten positionierten Tools.

DevTools vs. Quelltext

In den Entwicklertools wird nicht der Quelltext einer Website angezeigt, sondern die Interpretation des Quelltextes durch den Browser. Beim Quelltext handelt es sich um den Code, den der Entwickler geschrieben hat. Innerhalb der DevTools wird daher möglicherweise mehr, weniger oder anderer Code gezeigt.

Wenn im Abschnitt CSS beispielsweise eine Zeile Code durchgestrichen angezeigt wird, bedeutet dies, dass der Browser diese Zeile ignoriert, nicht dass sie falsch ist. Ignorierte Passagen im Code treten auf, wenn sie entweder durch den Einsatz eines Vendor-Präfixes für einen anderen Browser geschrieben wurden, oder wenn die Zeile durch einen anderen Befehl im selben Dokument überschrieben wird.

Responsive Design, Smartphones und Tablets testen

Ein wichtiger Bestandteil der Dev-Tools sind die Testfunktionen für Responsive Design. Hiermit können verschiedene Displaygrößen, Bedienkonzepte (z. B. Touch), Displayauflösungen und Breakpoints getestet werden.

Die Responsive Design Testing Tools erreicht man über das entsprechende Icon, oben links im »Dock« der Entwicklertools.

Screenshot der geöffneten DevTools inkl. geöffneter Responsive Design Testing Tools
Standardansicht der grün hervorgehobenen »Responsive Design Testing Tools« bei unten positioniertem Dock

Wenn die Responsive Design Testing Tools geöffnet sind, wird der Anzeigebereich (Viewport) der Website verkleinert. Oberhalb der Vorschau stehen einige Konfigurationsmöglichkeiten zur Verfügung. Die hier angezeigten Optionen können rechts über die drei kleinen Punkte ergänzt oder verringert werden:

Screenshot der RWD-Tools in Chrome mit eingeblendeten Optionen
Über die Optionen lassen sich weitere Funktionen der Responsive Design Testing Tools einblenden

Bei allen eingeblendeten Optionen stehen folgende Funktionen zur Verfügung:

  • Viewport-Größe bzw. Gerätesimulation:
    Wenn „Responsive“ gewählt ist, kann der Anzeigebereich über die Anfasser flexibel angepasst werden. Wenn ein bestimmtes Gerät zur Simulation ausgewählt wurde, setzt Chrome die für dieses Gerät notwendigen Optionen automatisch.
  • Zoomfaktor:
    Somit lassen sich auch Displaygrösse testen, die größer sind als das verwendete Gerät.
  • Media Queries:
    Hier können die Breakpoints eingesehen werden. Orange steht für Mobile First, blau für Desktop First, grün für eine Media Range.
  • Simulation des Gerätetyps:
    Zur Auswahl stehen mobile und Desktop jeweils mit Mouse- oder Touch-Bedienung.
  • Simulation der Internetgeschwindigkeit:
    Das Netzwerk kann abgebremst werden um beispielsweise zu prüfen wie der Aufbau der Website bei langsamem Internet wirkt.
  • Test der Displayqualität:
    1 DPR steht für normale Displayauflösung, 2 DPR für hochauflösende Displays mit Retina-Qualität, 3 DPR für ultra hochauflösende Displays

Zusätzlich stehen noch Funktionen bereit, die keine neuen Eingabefelder oder Auswahlmöglichkeiten bereitstellen. Beispielsweise können über »Show Rulers« Lineale eingeblendet werden oder bei einer Gerätesimulation kann über »Show Device Frame« das Gerät mit angezeigt werden.

kulturbanause.de auf simuliertem iPhone mit aktiviertem »Device Frame« und »Media Queries«
kulturbanause.de auf simuliertem iPhone mit aktiviertem »Device Frame« und »Media Queries«

Screenshots einer Website machen

Über die Optionen der Responsive Design Testing Tools kann mittels »Capture screenshot« auch ein Screenshot generiert werden. Hierbei kann nur der sichtbare Bereich exportiert werden oder die vollständige Website bis zum unteren Rand. Wenn letzteres gewünscht ist, muss die Option »Capture full size screenshot« gewählt werden.

Wichtig ist, dass die eingestellte Auflösung (DPR) Auswirkung auf die Qualität des Screenshots hat. Wenn DPR 2 eingestellt ist, wird der Screenshot in 200% Qualität erzeugt.

Design in the Browser

Websites werden – auch dank der Möglichkeiten der Entwicklertools – zunehmend direkt im Browser gelayoutet. In den Bereichen für HTML- und CSS-Code können Anpassungen gemacht werden, die direkt sichtbar sind. Diesen Workflow nennt man »Design in the Browser«.

Alle Änderungen in dem Dev-Tools sind (normalerweise) nur temporär im Browser sichtbar. Nach dem Neuladen der Website, sind die Anpassungen wieder verschwunden. Dennoch wird die Arbeit von Frontend-Entwicklern und Designern sowie deren Zusammenarbeit deutlich vereinfacht.

Elemente auswählen und untersuchen

Um gestalterische Anpassungen vornehmen zu können, muss erst einmal das passende Element ausgewählt werden. Dazu kann im Abschnitt »Elements« die HTML-Struktur über die Pfeile links auf- und zugeklappt werden um zum gewünschten Element zu navigieren. Per Klick wird dieses dann ausgewählt.

Alternativ kann das Icon zum Selektieren von Elementen, links neben dem Icon der Responsive Design Testing Tools, angeklickt werden. Wenn die Funktion aktiv ist, kann man visuell auf der Website die Elemente per MouseOver untersuchen und per Klick auswählen.

Nachdem das gewünschte HTML-Element markiert wurde, werden im Bereich »Styles« die CSS-Befehle angezeigt die zur Gestaltung des HTML-Elements verwendet wurden.

HTML editieren

Um Textinhalte im HTML-Bereich zu editieren genügt ein Doppelklick an entsprechender Stelle. Wenn wirklich der HTML-Code editiert werden soll, reicht ein Rechtsklick auf das Element. Anschließend steht de Eintrag »Edit as HTML« zur Verfügung.

CSS editieren

Um den bestehenden CSS-Code zu editieren, genügt ein Klick auf den Selektor, die Eigenschaft oder den Wert. Chrome schlägt beim Tippen bereits mögliche Befehle vor.

Wenn eine neue Eigenschaft hinzugefügt werden soll, muss rechts neben das Semikolon des letzten Befehls geklickt werden. Chrome öffnet dann eine neue Zeile und es kann die neue CSS-Eigenschaft geschrieben werden. Per Tab-Taste kann rechts zum Wert gesprungen werden.

Farben, Schatten und Übergänge editieren

Wenn der CSS-Selektor eine Farbangabe beinhaltet, so zeigt Chrome die Farbe als Vorschau an. Ein Klick auf die Farbe öffnet den Farbwähler. Hier kann eine farbliche Anpassung vorgenommen werden. Mit Enter wird die Anpassung bestätigt und der Farbcode übernommen. Den Farbcode kann man nun entweder auf den eigenen Quelltext übernehmen oder an den Entwickler kommunizieren.

Auch wenn der CSS-Selektor Schatten mittels box-shadow oder Übergänge mittels transition beinhaltet, wird ein kleines Icon angezeigt. Per Klick darauf kann ein weiteres Bedienfeld zur Anpassung aufgerufen werden.

Farbwähler, Schatten- und Transition-Designer in den Entwicklertools von Google Chrome
Farbwähler, Schatten- und Transition-Designer in den Entwicklertools von Google Chrome

CSS Fehler mit Hilfe der Entwicklertools finden und beheben

Chrome unterstützt auch beim Finden und Korrigieren von Tippfehlern. Wenn ein Befehl falsch ist, wird ein Ausrufezeichen angezeigt. Per MouseOver erfährt man auch, ob die Eigenschaft (Property) oder der Wert (Value) falsch ist.

Per MouseOver erfährt man, ob die Eigenschaft oder der Wert eines CSS-Befehls falsch ist

Wie bereits oben erwähnt, bedeutet eine durchgestrichene und ausgegraute Zeile ohne Ausrufezeichen nicht, dass der Befehl falsch ist, sondern dass Chrome den Befehl ignoriert.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.