Chrome: Perfekter Browser für Webdesigner
Als Webdesigner entwickelt man zuerst für die Hauptgruppe der Nutzer. Und die nutzen den Chrome Browser von Google. Glücklicherweise dient Chrome auch als exzellentes Werkzeug für die Webentwicklung.
Webdesigner pflegen zu Browsern eine Hassliebe. Denn jeder Browser hat so seine Eigenheiten und Du willst sicherlich, dass Deine Websites auf allen Browsern in allen Geräten gut aussehen.
Über kurz oder lang, kommst Du nicht darum herum auf Deinem Computer zahlreiche Browser für Website-Tests zu installieren. Für den Anfang empfehle ich Dir aber Chrome, denn Chrome hat ein paar wunderbare Werkzeuge für die Webentwicklung direkt mit an Bord. So kannst Du in Chrome z.B. mobile Geräte simulieren, so tun als ob Du eine langsame Internetgeschwindigkeit hast oder Du kannst Webseiten direkt in Chrome bearbeiten.
Chrome Entwicklertools
Ein unschlagbares Argument für Chrome sind vor allem die integrierten Chrome Entwicklertools, mit denen Du eine Webseite untersuchen, manipulieren und testen kannst. Man könnte ein eigenes Buch über die Entwicklertools schreiben.
Ich stelle Dir aber nur ein paar wesentliche Funktionen vor, die Du zu Anfang wissen solltest.
Quellcode anzeigen in Chrome, Internet Explorer, Firefox und Safari
Immer wieder wirst Du beim Webdesign Deine oder andere Webseiten untersuchen wollen. Um den Quellcode einer Webseite anzuschauen, gibt es drei Möglichkeiten.
Quelltext anzeigen in Chrome
Entweder klickst Du auf den Menüpunkt Anzeigen > Entwickler > Quelltext anzeigen. Oder Du klickst auf der Webseite die rechte Maustaste und wählst Seitenquelltext anschauen. Oder Du wählst die beste und schnellste Option und merkst Dir die Tastenkombination cmd + u auf dem Mac bzw. STRG + u auf Windowssystemen.
Wenn Du nicht Chrome nutzt…
…dann steht Dir die Quelltext-Anzeige auch in allen anderen Browsern zu Verfügung. Der Vollständigkeit halber, hier noch kurz, wie Du den Quelltext in den anderen populären Browsern öffnest.
Quelltext anzeigen im Internet Explorer
Im Internet Explorer öffnest Du einfach eine Webseite und klickst dann auf die rechte Maustaste und wählstQuellcode anzeigen.
Quelltext anzeigen im Firefox
Im Firefox-Browser klickst Du auf einer Webseite einfach die rechte Maustaste und wählst Seitenquelltext anzeigen. Der Quelltext erscheint dann, wie bei allen anderen Browsern in einem neuen Tab.
Quelltext anzeigen in Safari
In Safari musst Du die Quellcode-Anzeige erst aktivieren. Öffne dazu das Menü Safari > Einstellungen und dort den ReiterErweitert. Ganz unten im Fenster setzt Du in der Checkbox bei Menü Entwickler in der Menüleiste zeigen ein Haken. Nach dem Schließen der Einstellungen findest Du einen neuen Menüpunkt Entwickler in der Menüleiste des Browsers und kannst jetzt auch über die rechte Maustaste den Quelltext aufrufen.
Chrome Entwicklertools öffnen
Um die Chrome Entwicklertools zu öffnen, wählst Du das Menü Anzeigen > Entwickler > Entwickler. Oder Du öffnest das Kontextmenü mit der rechten Maustaste und wählst den Menüpunkt Untersuchen. Über die Tastenkombination cmd alt + i auf dem Mac bzw. Strg + Shift + j oder F12 auf Windowssystemen.
Mobile Geräte simulieren
Chrome kann so tun, als ob der Browser z.B. ein iPhone 7 wäre. Um die Ansicht für mobile Geräte zu öffnen, klickst Du auf das kleine Icon mit den zwei Rahmen – siehe Abbildung (1). Anschließend suchst Du Dir über (2) das zu simulierende Gerät aus.
Langsame Internetgeschwindigkeit simulieren
Wie bauen sich Deine Webseiten auf, wenn jemand sie mit langsamer Downloadgeschwindigkeit – z.B. im Regionalexpress – besucht? Über die Entwicklertools simuliert Chrome die Datenratenbegrenzung, auch bandwidth throttling genannt. Die Datenrate veränderst Du über (3).
Screenshots für Kunden mit Smartphone-Rahmen
Über (4) kannst Du das Aussehen der Darstellung beeinflussen. Für manche Geräte bietet Chrome einen eigenen Rahmen. Das Menü (4) erlaubt Dir sogar schicke Bildschirmfotos abzuspeichern – z.B. für Kunden.