Was und wofür sind die Entwicklertools?
Die sogenannten “Entwicklertools” sind eine Kollektion von hilfreichen Werkzeugen, die in jedem Webbrowser mitgeliefert werden. Sie erlauben es, die gerade angezeigte Webseite zu analysieren und auf verschiedenen Bildschirmgrößen zu testen. Das ist für jeden Betreiber einer Webseiten interessant.
Wie aktiviere ich die Entwicklertools?
Zu den Entwicklertools gelangen wir, wenn wir an einer beliebigen Stelle auf der Webseite einen Rechtsklick tätigen und anschließend auf “Element untersuchen” gehen.
Dabei wird das gewählte Objekt in den Entwicklertools hervorgehoben und ist zum Bearbeiten bereit.
Der Elemente-Tab
Der erste Tab zeigt uns das Layout der Seite. Auf der linken Seite befindet sich der HTML-Quellcode, das sogenannte DOM (Document Object Model). Die rechte Spalte erlaubt es uns optische Änderungen im CSS vorzunehmen.
So können wir zum Beispiel das Wort “vernetzten” durch “digitalen” ersetzen. Die Möglichkeiten der Bearbeitung sind nahezu unbegrenzt. Elemente und Eigenschaften können entfernt, verschoben, hinzugefügt und bearbeitet werden.
Um die Farbe der Überschrift beispielsweise von Schwarz auf Rot zu ändern, genügt ein Klick auf das kleine Icon der Farbe um einen Farbregler zu öffnen.
Der Netzwerk-Tab
In der heutigen Zeit werden Webseiten längst nicht mehr ausschließlich von einem Desktop-PC oder Latop mit fester Internetverbindung aufgerufen. Stattdessen surfen wir im Zug, an der Haltestelle, im Wartezimmer beim Arzt.
Über den Netzwerk-Tab können wir die Ladezeit und Größe einer Seite ermitteln und analysieren.
Hier sehen wir am unteren Bildschirmrand, dass die Seite nach 1,28s fertig geladen wurde und der Aufruf insgesamt 94KB benötigt hat. Ladedauer und Größe einer Seite sind enorm wichtig, um eine angenehme Nutzererfahrung auf mobilen Geräten, wie beispielsweise Smartphone oder Tablet, oder über das mobile Internet zu gewährleisten.
Werden Webseiten für Mobilgeräte zugänglich gemacht, sprechen wir vom so genannten “Responsive Design”.
Hierzu hält Timo übrigens beim nächsten Feierabend am 14.07.2015 einen Vortrag!
Die mobile Emulation
Um zu sehen, wie eine Webseite auf einem bestimmten Endgerät aussieht, bieten die Entwicklertools die Möglichkeit, diverse Endgeräte zu emulieren. Ebenso können Standort, Bandbreite und diverse andere Dinge vorgetäuscht werden.
Um ein Endgerät zu emulieren, klicken wir auf das kleine Handy-Symbol in der oberen Leiste der Entwicklertools und wählen anschließend das gewünschte Endgerät, oder geben eine eigene Auflösung ein.
Nachdem wir eine Auswahl getroffen haben, müssen wir die Seite erneut laden, um die Änderungen wirksam zu machen. Hier können wir die Seite mit den vorher beschriebenen Mitteln weiterhin bearbeiten und analysieren. Sobald die Entwicklertools geschlossen werden, erhalten wir automatisch die normale Desktop-Ansicht zurück.
Fazit
Entwicklertools befinden sich in allen modernen Browsern, so dass sie jedem Anwender von Nutzen sein können. Auch wenn der Funktionsumfang enorm ist, reichen oft simple Handgriffe aus, um potentielle Optimierungen zu erkennen. Mehr Verständnis dafür würde die Kommunikation oftmals vereinfachen und die Qualität von Webseiten im Internet allgemein verbessern.
Eine Antwort
Dankeschön für den hilfreichen Artikel! Obwohl ich schon häufiger die Tools benutzt habe, sind mir beim Lesen Deines Beitrages noch einige Punkte eingefallen, wofür und wie ich diese in Zukunft verstärkt einsetzen könnte.