Die ersten Schritte mit den Entwicklertools

Die Entwicklertools

Alle modernen Browser verfügen über sogenannte Entwicklertools welche zahlreiche Funktionen zum Gestalten, Editieren, Testen, Analysieren und Korrigieren von Webseiten und Web-Applikationen zur Verfügung stellen.

Im folgenden Blogbeitrag fassen wir die grundlegendsten Funktionen der Chrome Entwicklertools für Einsteiger zusammen.

Inhaltsverzeichnis

👨‍💻 Die Entwicklertools aufrufen
🏗 Aufbau der Entwicklertools
📌 Die Entwicklertools positionieren
❕ Unterschied Entwicklertools und Quellcode
📲 Responsive Design testen
💻 Viewport Grösse
🔎 Zoomfaktor
📊 Test der Displayqualität
🏎 Simulation der Internetgeschwindigkeit
🔄 Drehen
🎚 Weiter Optionen
📏 Massstab
⌨️ Gerätesimulation
📸 Screenshots der Webseite:
🖱 Elemente auswählen und untersuchen
🗃 HTML editieren
🏁 Schlusswort

Die Entwicklertools aufrufen

Um die Entwicklertools aufzurufen genügt ein Rechtsklick auf einer beliebigen Stelle der Webseite und im aufpoppenden Kontextmenü mit einem Linksklick auf den Eintrag «Untersuchen» öffnen sich die Tools.

Alternativ können die Entwicklertools auch über «Chrome-Menü» > «Weitere Tools» > «Entwicklertools» aufgerufen werden.

Weiter können die Entwicklertools auch einfach über die Tastenkürzel Windows: F12 oder Strg+Shift+I oder Mac: Cmd+Option+I geöffnet werden.

Aufbau der Entwicklertools

Die Tools öffnen sich standardmässig auf der rechten Seite. Wie dies konfiguriert werden kann erfährst Du im nächsten Kapitel.

Aber nun betrachten wir den Aufbau der Entwicklertools. Im obersten Bereich der Tools wird unter dem Reiter «Elements» der HTML-Code angezeigt, unterhalb im Reiter «Styles» wird der CSS-Code zum jeweiligen, ausgewählten HTML-Element angezeigt. Ganz am unteren Rand lässt sich mit der «ESC»-Taste ein dritter Bereich öffnen und schliessen, in diesem wird im Reiter «Console» JavaScript Mitteilungen angezeigt. Für die folgenden Erklärungen ist dieser Abschnitt nicht relevant und kann geschlossen werden.

Die Entwicklertools positionieren

In der rechten oberen Ecke findest Du drei kleine Punkte, mit diesen kannst Du noch weitere Einstellungen an den Tools vornehmen, wie z.B. die Position. Neben der rechten Seite kannst Du die gesamte Ansicht am linken oder unteren Rand oder als eigenes Fenster positionieren.

Ob Rechts, Links oder als eigenes Fenster bleibt die Anordnung der HTML, CSS und JavaScript Blöcke gleich. Einzige bei der unten positionierten Ansicht ist der HTML Bereich links, der CSS rechts und der JavaScript ganz unten zu finden.

Unterschied Entwicklertools und Quellcode

In den Entwicklertools wird nicht der Quellcode einer Webseite angezeigt, sondern die Interpretation durch den Browser des Quellcodes. Der Quellcode ist der Code, welcher ein Entwickler geschrieben hat und daher kann in den Entwicklertools weniger, mehr oder anderer Code angezeigt werden.

Zum Beispiel wenn im CSS-Bereich eine Zeile durchgestrichen ist bedeutet dies nicht, dass ein falscher Code geschrieben wurde sondern, dass der Browser diese Zeile ignoriert. Solche ignorierte Codeabschnitte treten auf, wenn diese mittels Browserpräfix für einen anderen Browser programmiert wurden oder wenn ein anderer Befehl im selben Dokument den gleichen Bereich überschreibt.

Responsive Design testen

Ein Herzstück der Entwicklertools ist die Testfunktion des Responsive Design einer Webseite. Mit dieser Funktion können verschieden Displaygrössen, -auflösungen, Touchbedienung und Breakpoints getestet werden

Diese Funktion kann mittels dem «Toggle device toolbar» Icon im linken oberen Ecken aufgerufen werden oder mittels Shortcut Windows: Ctrl+Shift+M oder Mac: Cmd+Shift+M.

Nun wechselt der Bereich in welchem bis soeben die Webseite angezeigt wurde in den Responsive Design Bereich und der Anzeigebereich der Webseite wird verkleinert.

Folgenden Einstellungen kannst Du innerhalb der farblich markierten Bereiche vornehmen.

Viewport Grösse (roter Bereich):

Wenn «Responsive» ausgewählt ist kann der Anzeigebereich über die Seitenränder flexibel angepasst werden oder über die Pixeleingabe. Bei der Auswahl eines Gerätes setzt Chrome die Grösseneinstellungen automatisch.

Zoomfaktor (violetter Bereich):

Hiermit lassen sich auch Displaygrössen testen, welche grösser als das verwendete Display sind.

Test der Displayqualität (grüner Bereich):

DPR 1 steht für normalauflösende, 2 für hochauflösende und 3 für ultrahochauflösende Displays

Simulation der Internetgeschwindigkeit (oranger Bereich):

Die Internetleistung kann abgebremst werden, um zu prüfen wie sich der Aufbau bei langsamem Internet verhält oder für welche Auswirkungen sorgt.

Drehen (blauer Bereich):

Das simulierte Gerät wird um 90° gedreht.

Weiter Optionen (gelber Bereich):

Mittels den drei Punkten am rechten oberen Rand können noch weiter Einstellungen vorgenommen werden.

Screenshots der Webseite:

Zum einen kann ein Screenshot des sichtbaren Bereichs erstellt werden, wenn «Capture screenshot» ausgewählt wird oder ein Screenshot der vollständigen Webseite mittels «Capture full size screenshot».

Wichtig ist dabei zu beachten welche Auflösung (DPR) ausgewählt ist, denn dies hat Auswirkungen auf die Qualität der Screenshots.

Elemente auswählen und untersuchen

Damit gestalterische Anpassungen vorgenommen werden können muss zuerst das gewollte Element ausgewählt werden. Dafür musst Du das Icon im linken oberen Ecken der Entwicklertools anklicken und anschliessend kannst Du per Mouseover die Elemente der Webseite untersuchen und auswählen.

Wenn Du das gewünschte Element angeklickt hast erscheint im CSS-Bereich die entsprechenden CSS-Befehle, welche zur Gestaltung des ausgewählten Elements verwendet wurden. Hier kannst Du nun diese Gestaltung anpassen und die Änderungen werden direkt sichtbar auf der Webseite. Allerdings ist nicht zu vergessen, alle Änderungen in den Entwicklertools sind nur temporär und nach einem erneuten laden der Webseite wieder verschwunden. Dennoch können damit auf einfache Art und Weise Anpassungen an der Live Site getestet werden ohne bei einem Fehler den gesamten Webauftritt lahm zu legen.

HTML editieren

Um einzelne Inhalte im HTML-Bereich zu editieren genügt ein Doppelklick an die entsprechende Stelle im HTML-Abschnitt. Solltest Du allerdings mehr im HTML-Code anpassen wollen kannst Du auf die Zeile mit «<html…» reckts klicken und dann «Edit as HTML» auswählen.

Schlusswort

Natürlich sind das nicht die voll umfänglichen Möglichkeiten der Entwicklertools, sondern es ging darum Dir die Tools vorzustellen und dass Du erste Schritte damit ausführen kannst. Erzähl uns in den Kommentaren welche Erfahrungen Du nun mit den Tools erlebt hast und was für Themen Du Dir für einen Folgebeitrag zu den Entwicklertools wünschen würdest.