Denis Potschien 14. Juli 2016

Arbeitserleichterungen: Chrome-Erweiterungen für Webentwickler

Arbeitserleichterungen: Chrome-Erweiterungen für Webentwickler

Browser haben in den letzten Jahren zunehmend nachgerüstet und bieten mittlerweile zahlreiche Werkzeuge für Entwickler, mit denen du deine Webprojekte auf Herz und Nieren, beziehungsweise HTML, CSS und JavaScript testest. So werden JavaScript-Fehler ebenso erkannt wie eine falsche CSS-Auszeichnung. Doch die Entwicklerwerkzeuge können (noch) nicht alles. Daher gibt es zahlreiche Chrome-Erweiterungen für Webentwickler, die dir die Arbeit erleichtern.

Arbeitserleichterungen: Chrome-Erweiterungen für Webentwickler

Schriften erkennen mit „WhatFont“

Als Webdesigner und -entwickler ist man ja immer wieder auch auf anderen Websites unterwegs, um sich inspirieren zu lassen und Anregungen zu holen. Hast du beispielsweise eine Schrift auf einer Website entdeckt, die du gerne selbst verwenden möchtest, hilft dir die Erweiterung „WhatFont“ weiter.

„WhatFont“

„WhatFont“

Statt mühsam in den Stylesheets nach dem Schriftnamen zu suchen, reicht es bei „WhatFont“, mit der Maus über den entsprechenden Text zu fahren. Ein kleiner Tooltip verrät dir den Namen der verwendeten Schrift. Per Klick auf den Text werden dir zusätzliche Informationen ausgegeben, wie die Schriftgröße und -farbe.

Farben aufnehmen mit „Eye Dropper“

Ähnlich wie mit Schriften verhält es sich mit Farben. Um einen exakten Farbwert aus einer Website zu extrahieren, muss dieser aus dem Stylesheet kopiert werden. Willst du eine Farbe aus einem Bild holen, hilft nur ein Screenshot, der in deine Bildbearbeitung kopiert wird.

„Eye Dropper“

„Eye Dropper“

Eye Dropper“ macht das alles überflüssig. Die Erweiterung stellt dir eine Pipette zur Verfügung, mit der du eine Farbe von einer Website aufnehmen kannst. Dabei beschränkt sich „Eye Dropper“ nicht nur auf jene Elemente, die per CSS eine Farbe zugewiesen bekommen haben. Du kannst auch aus einem Bild per Pipette einen Farbwert ziehen.

Die Farbe wird dir als Hexadezimal- RGB- und HSL-Wert einschließlich korrekter CSS-Auszeichnung ausgegeben.

Cookies deaktivieren mit „Disable Cookies“

JavaScript für eine Seite ausschalten, Cache für eine Seite ausschalten – all das ist unkompliziert möglich dank der Entwicklerwerkzeuge in Chrome. Nur das schnelle Aktivieren und Deaktivieren von Cookies ist in Chrome nicht möglich.

Hierzu ist normalerweise der Weg über die Einstellungen nötig. Um mal schnell zu testen, wie eine Website auf deaktivierte Cookies reagiert, ist der Umweg über die Einstellungen ein recht komplizierter.

Dank der Erweiterung „Disable Cookies“ schaltest du Cookies für eine Website über einen Button in der Werkzeugleiste einfach ein und aus.

Abstände und Größen messen mit „Page Ruler“ und „Dimensions“

Sind alle Elemente auf deiner Website korrekt platziert? Stimmen Abstände und Größen? Folgende Erweiterungen helfen dir dabei, deine Website zu vermessen.

„Page Ruler“

„Page Ruler“

Der „Page Ruler“ erlaubt es dir, freihand oder über die Eingabe numerischer Werte ein Rechteck auf einer Website zu platzieren. Dabei werden dir die Abstände zu allen vier Seitenrändern sowie die Breite und Höhe des Rechtecks ausgegeben.

„Dimensions“

„Dimensions“

Eine Alternative ist die Erweiterung „Dimensions“. Diese misst von alleine die Abstände zwischen benachbarten Elementen. Dazu platzierst du den Mauszeiger einfach zwischen die jeweiligen Elemente. Zwei Linien zeigt dir an, welcher Abstand gemessen wird. Gemessen wird jeweils der vertikale und horizontale Abstand zu benachbarten Elementen.

Seite bei Veränderung automatisch neu laden mit „LivePage“

Das Neuladen einer Website gehört wohl zu den meist getätigten Aktionen. Da werden Änderungen an HTML-, CSS- und JavaScript-Dateien vorgenommen, die anschließend im Browser getestet werden müssen.

Die Erweiterung „LivePage“ erspart dir das ständige manuelle Neuladen. Denn immer, wenn eine eingebundene Ressource – also zum Beispiel eine CSS-Datei – auf dem Server geändert wurde, lädt die Erweiterung die Seite automatisch neu.

Screenshots erstellen mit „Awesome Screenshot“

„Awesome Screenshot“

„Awesome Screenshot“

Sei es zur Präsentation im eigenen Portfolio oder beim Kunden: Screenshots von Websites sind immer wieder notwendig. Mit „Awesome Screenshot“ machst du mit einem Klick Screenshots. Dabei wird ausschließlich der Inhalt des aktuellen Tabs berücksichtigt.

Außerdem entscheidest du, ob nur vom im Browser sichtbaren Bereich oder von der gesamten Seite ein Screenshots erstellt werden soll. Möglich ist also auch, einen kompletten Screenshots von sehr langen, scrollbaren Seiten zu erstellen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Hi Denis,

    tolle Übersicht – aber doch eher für die Designer…

    Als Entwickler möchte ich auf „Quick Javascript Switcher“ nicht mehr verzichten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.