33 Chrome-Erweiterungen für Webdesigner und -entwickler

Prototyping im Browser gewinnt immer mehr an Beliebtheit. Dazu bedarf es allerdings entsprechender Tools, die für diesen Arbeitsort geeignet sind. Die folgenden Helferlein erleichtern so manche Alltagsaufgabe.

(Bild: Google) 

„Dimensions” ist eine Extension, mit deren Hilfe ihr eine Website im Browser vermessen könnt. Es misst von alleine die Abstände zwischen benachbarten Elementen. Dazu platziert ihr den Mauszeiger zwischen die jeweiligen Elemente. Zwei Linien zeigen an, welcher Abstand gemessen wird – jeweils der vertikale und horizontale Abstand zu benachbarten Elementen. Dimensions im Chrome Web Store

(Bild: Google) 
Der „Responsive Inspector” verspricht, die Arbeit mit Media-Queries zum Kinderspiel zu machen. So zeigt das Tool, welche Media-Queries im Dokument vorhanden sind, es kann den Browser auf die Einstellungen der jeweiligen Media-Query bringen und die genaue Position der Query im Stylesheet anzeigen. Darüber hinaus erstellt das Plugin einen Screenshot der kompletten Seite in den Dimensionen der jeweiligen Media-Query.

Das Neuladen einer Website gehört zu den meist getätigten Aktionen. Hierbei werden Änderungen an HTML-, CSS- und JavaScript-Dateien vorgenommen, die anschließend im Browser getestet werden müssen. Die Erweiterung „LivePage“ erspart euch 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. Die Extension ist jedoch nicht kostenlos, sie kostetet 2,99 €. 

(Bild: Google) 
„Text” ist ein simpler Text-Editor für Chrome und selbstredend Chrome OS. Ihr könnt mehrere Dokumente gleichzeitig geöffnet haben, erhaltet Syntax-Highlighting und synchronisiert eure Daten mit Google Drive. Text im Chrome Web Store

(Bild: Google) 
Die Extension „Web Developer” von Chris Pederick ist ein Urgestein im Markt der Browsererweiterung und seit vielen Jahren vor allem Nutzern des Firefox unverzichtbar geworden. Seit einigen Jahren bietet Chris die Extension ebenso für den Chrome-Browser an, wenn er auch die Entwicklungstätigkeit daran etwas zurückgefahren hat. Tatsächlich ist „Web Developer“ die wohl umfangreichste Tool-Sammlung für Designer und Developer, die es am Markt gibt. Pederick vereint die Features vieler anderer hier vorgestellter Extensions an einer Stelle und macht „Web Developer“ damit zu einer Art Schweizer Messer für Webentwickler. Bei mir kommt die Extension hauptsächlich für das Anzeigen eines Seitenlineals – die Vermessung von Elementen und die Größenänderung des Browserfensters auf definierte Maße, wie etwa 1024 x 768 Pixel – zum Zuge. Das fällt mir nämlich ansonsten an meinem 4K-Monitor einigermaßen schwer. Ihr könnt aber auch JavaScript, CSS, Bilder, Cookies abschalten oder Webseiten validieren. Alle Features des Erweiterungsboliden aufzuzählen, sprengt aber den Rahmen dieser Liste. Web Developer im Chrome Web Store

(Bild: Google) 

„Window Resizer” ist eines dieser ganz kleinen, sehr spezialisierten Tools. Es macht nichts anderes als das Browserfenster auf bestimmte Größenwerte zu ändern. Das ist sehr nützlich, wenn ihr euer responsives Design testen müsst. Die Liste festgelegter Auflösungen, die per einfachem Klick zur jeweiligen Größenänderung führt, ist vollständig anpassbar. Window Resizer im Chrome Web Store

(Bild: Google) 

Mit dem Plugin „ColorZilla” könnt ihr herausfinden, welche Farben auf einer Webseite genutzt werden. Mit einer digitalen Pipette fahrt ihr über den entsprechenden Farbton und schon wird angezeigt, welcher HTML-Code sich dahinter verbirgt. Außerdem könnt ihr Farbverläufe erstellen und vorlagenfrei Farben aus einer Palette auswählen. ColorZilla im Chrome Web Store

(Screenshot: Google) 
 

„Awesome Screenhot” kann als minimalistische Alternative zu „Skitch” verstanden werden. Mit dem Plugin, das es auch für Firefox und Safari gibt, könnt ihr im Handumdrehen Screenshots erstellen und direkt mit Annotationen versehen. Dabei wird ausschließlich der Inhalt des aktuellen Tabs berücksichtigt. Außerdem entscheidet ihr, ob nur vom im Browser sichtbaren Bereich oder von der gesamten Seite ein Screenshot erstellt werden soll. So könnt ihr komplette Screenshots von sehr langen, scrollbaren Seiten erstellen. Auch das Teilen der Resultate über soziale Kanäle, Mail oder per Link ist möglich. Eine interessante Alternative mit praktisch identischem Funktionsumfang ist die Extension „Fireshot”. 
Awesome Screenshot im Chrome Web Store
Fireshot im Chrome Web Store

(Screenshot: Google) 

Habt ihr eine Schrift auf einer Website entdeckt, die ihr gerne selbst verwenden möchtet, gilt es, deren Namen zu ermitteln. Hier hilft euch die Erweiterung „WhatFont“ weiter. Statt mühsam in den Stylesheets nach dem Schriftnamen zu suchen, reicht es bei aktiviertem „WhatFont“ aus, mit der Maus über den entsprechenden Text zu fahren. Ein kleiner Tooltip verrät euch den Namen der verwendeten Schrift. Per Klick auf den Text werden euch zusätzliche Informationen ausgegeben, wie die Schriftgröße und -farbe. WhatFont im Chrome Web Store

(Bild: Google) 

Ä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. Wollt ihr etwa eine Farbe aus einem Bild holen, hilft nur ein Screenshot, der in eine Bildbearbeitung kopiert und dort dann untersucht wird. „Eye Dropper“ macht das alles überflüssig. Die Erweiterung stellt euch eine Pipette zur Verfügung, mit der ihr eine Farbe von einer Website aufnehmen könnt. Dabei beschränkt sich „Eye Dropper“ nicht nur auf jene Elemente, die per CSS eine Farbe zugewiesen bekommen haben, ihr könnt auch aus einem Bild per Pipette einen Farbwert ziehen. Die Farbe wird euch als Hexadezimal-, RGB- und HSL-Wert einschließlich korrekter CSS-Auszeichnung ausgegeben. Eye Dropper im Chrome Web Store

(Bild: Google) 
 

Die „Web Developer Checklist” von Sayed Ibrahim Hashimi und Mads Kristensen sorgt dafür, dass ihr im Produktionsprozess einer Website nichts Wichtiges vergesst. Das leistet die Checkliste zwar nicht vollumfänglich, deckt aber die Basics gut ab. Ungeachtet ihrer inhaltlichen Erweiterungsbedürftigkeit verfolgt die Checkliste insofern einen interessanten Ansatz, als dass sie zu jedem Punkt weiterführende Links zu nützlichen Diensten oder Grundlagen, wie entsprechenden Guidelines und ähnliche Infos anbietet. Das Projekt steht auf Github unter Apache-Lizenz zur kostenlosen Nutzung und vor allem auch zur Mitwirkung bereit. Die Chrome-Extension macht die Checkliste auf Klick zugänglich. Web Developer Checklist im Chrome Web Store

Die Extensions dieser Kategorie sind von Entwicklern für Entwickler gemacht.

(Bild: Google) 

JavaScript für eine Seite ausschalten, Cache für eine Seite ausschalten – solche Aktivitäten sind mit den Entwicklerwerkzeugen in Chrome unkompliziert erledigt. 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. Mit der Erweiterung „Disable Cookies“ schaltet ihr Cookies für eine Website über einen Button in der Werkzeugleiste einfach ein und aus. Disable Cookies im Chrome Web Store

(Screenshot: Google) 
 

Wer wissen will, welche Repositories auf „GitHub” gerade populär sind, sollte die Chrome-Erweiterung „Githunt” einer näheren Betrachtung unterziehen. „Githunt” zeigt euch wahlweise die populärsten Repositories für die aktuelle Woche, den aktuellen Monat oder das Jahr an. Außerdem könnt ihr alternativ auch eine Programmiersprache auswählen. Dann werden euch nur noch Projekte in der gewählten Sprache aufgelistet

(Bild: Google) 

„Marmoset” ist ein Screenshot-Generetor für Codeschnipsel. Das klingt zunächst unspektakulär, ist aber durchaus dann eine willkommene Ergänzung, wenn ihr euren Quellcode präsentabel benötigt, zum Beispiel zur Bebilderung eines Beitrags. Selbst wenn ihr ein entsprechendes Plugin für das eingesetzte CMS verwendet, kann Marmoset weitaus attraktiver präsentieren. Schnöde Codeschnipsel sind damit passé. Marmoset im Chrome Web Store

Immer neue Ideen zu entwickeln, ist keine einfache Aufgabe. Erleichterung könnt ihr euch verschaffen, indem ihr einige schnelle Inspirations- und Informationsquellen zur Hand habt. Schneller als direkt im Browser kann es nicht sein.

(Bild: Google) 

Ich kenne keinen Webentwickler, der nicht „Dribbble” zu Inspirationszwecken nutzen würde. In der Tat ist das riesige Kreativnetzwerk immer wieder eine wahre Schatzkiste an interessanten Fundstücken. Dabei kann man neben Inspiration auch immer wieder handfeste Freebies ergattern, die einem das Leben erleichtern. Wenn ihr euch den Umgang mit „Dribbble” noch angenehmer gestalten wollt, könnte die Extension „Booom” für euch interessant sein. Ziel ist es, das Handling von Dribbble zu verbessern. So werden die Shots größer angezeigt, sie sind direkt aus dem Feed zu liken oder in die Bucket-List zu legen. Beide Tätigkeiten könnt ihr ansonsten nur von der Detailansicht aus erledigen. GIFs starten automatisch schon in der Liste. Zudem verbessert Booom die Darstellung auf Monitoren mit höherer Auflösung. „Booom” gibt es übrigens auch für Safari.

(Screenshot: Google) 

„Exposure” lässt sich am besten als eine Art Medium für Bilder beschreiben. Die Chrome-Erweiterung von „Exposure” zeigt euch auf jedem neuen Tab ein inspirierendes Foto im Vollbildformat an. Ein Klick und ihr kommt zu dem dazugehörigen Fotoalbum. Exposure im Chrome Web Store

(Bild: Google) 

„Unsplash Instant” ist die offizielle Chrome-Extension der Betreiber des kostenlosen Fotoproviders Unsplash. „Unsplash Instant” nistet sich in jedem neuen Tab ein und zeigt ein formatfüllendes Foto aus dem Unsplash-Portfolio. Von dort aus könnt ihr es direkt herunterladen oder per Facebook und Twitter teilen. Mich inspiriert das Tool tatsächlich mehrmals täglich, aber das ist natürlich kein Versprechen, dass es bei euch in gleicher Weise funktioniert. ;-) 

Unsplash Instant im Chrome Web Store

(Bild: Google) 

„Flickr Tab” ist eine offizielle Erweiterung des gleichnamigen Betreibers und funktioniert genau wie „Exposure” und „Unsplash Instant”. Es besetzt die Standardeinstellung eines jeden neuen Tab und zeigt darin ein bildschirmfüllendes Foto aus der Flickr-Community an. Flickr Tab im Chrome Web Store

(Screenshot: Google) 

Wer fortlaufend über aktuelle Tech-, Start-up- und Marketing-Themen informiert bleiben möchte, sollte sich „Panda” anschauen. Auf jedem neuen Tab bekommt ihr wahlweise die Topthemen von Hacker News, Designer News, Product Hunt, Lobster oder Sidebar.io angezeigt. Daneben zeigt die Erweiterung inspirierende Bilder von Dribbble, Behance oder Awwwards an. Panda im Chrome Web Store

(Bild: Google) 

„Muzli 2” ist eine Art aufgebohrtes „Panda”, aber vom Konzept her identisch. Ebenso wie auf Panda erhaltet ihr Inspiration und Information aus vielen Ecken des Netzes. Tatsächlich fokussiert sich „Muzli” auf Themen, die Designer und Developer interessieren werden. Wenn ihr „Muzli” als Ersatz für euren Feedreader verwenden wollt, freut ihr euch vielleicht über die Möglichkeit, auch eigene Feeds in das persönliche „Muzli” zu packen. Die Extension wurde vom Prototyping-Provider „InVision” gekauft, läuft aber eigenständig und mit Volldampf weiter. Muzli 2 im Chrome Web Store

(Screenshot: Google) 

„Color Tab” bringt mit jedem neuen Tab eine neue Farbpalette auf euren Bildschirm. Außerdem seht ihr zu jeder Farbe direkt den entsprechenden HEX-Farbcode und könnt ihn kopieren. Ein Klick auf das Logo in der oberen rechten Ecke wiederum bringt euch zu „Color Hunt”, dem Anbieter der Erweiterung. Von der Website aus könnt ihr die aktuelle Farbpalette auf Wunsch auch direkt per Facebook mit einem Kollegen teilen. Color Tab im Chrome Web Store

(Bild: Google) 

„SiteSee” ist eine Erweiterung, die sich ebenfalls um die Standardbesetzung für neue Tabs bewirbt. Sie tut exakt, was der Name suggeriert, nämlich Sites vorstellen. Installiert ihr „SiteSee”, zeigt sich jeder neue Tab künftig als ein fensterfüllendes Grid sehenswerter Webseiten. Klickt ihr eines der Thumbnails an, gelangt ihr ohne Umschweife zur entsprechenden Seite. Da „SiteSee” sein Portfolio regelmäßig erweitert, kommen Woche für Woche eine ganze Reihe neuer Eindrücke hinzu. Wenn ihr „SiteSee” zwar in euren Werkzeugkasten aufnehmen, aber nicht gleich den Standardplatz als neuer Tab dafür opfern wollt, speichert einfach diesen Bookmark zum Projekt. SiteSee im Chrome Web Store

Die folgenden Extensions sind nützlich, um den täglichen Umgang mit dem Browser zu erleichtern und zu beschleunigen. Sie richten sich nicht ausdrücklich oder gar ausschließlich an Entwickler, sind aber besonders für diese Zielgruppe interessant.

(Bild: Google) 

„Check my Links” von Paul Livingstone tut genau, was der Name verspricht: Einmal aufgerufen, prüft es unverzüglich alle Links derjenigen Seite, von der aus ihr den Checker gestartet habt. So seht ihr erstmal, wie viele Links tatsächlich auf einer handelsüblichen Seite zu finden sind. Ich verwende die Extension regelmäßig, wenn ich bereits bestehende Inhalte aktualisieren muss. Anstatt mühsam jeden Link einzeln aufzurufen, lasse ich „Check my Links” den Job erledigen und nehme danach ganz bequem die toten Links raus oder ersetze sie durch funktionierende. Check my Links im Chrome Web Store

(Screenshot: Google) 
 

„The Great Suspender” sorgt dafür, dass Chrome-Tabs keinen Arbeitsspeicher verbrauchen. Die Extension legt ungenutzte Tabs regelrecht „schlafen“. Ihr könnt in den Einstellungen der Erweiterung einstellen, nach welchem Zeitraum ein Tab deaktiviert wird und auf welche Weise dieser wieder „aufwachen“ soll.

(Bild: Google) 

Ihr braucht mehr Kontrolle im unüberschaubaren Passwort-Dschungel? Die Chrome-Erweiterung von „LastPass” unterstützt euch bei der Verwaltung eurer Passwörter und der Erstellung sicherer Passwörter. Die Autofill-Funktion erweist sich als ebenso praktisch, denn ihr müsst euch nie wieder auf die Suche nach Login-Daten machen. Auch für „1Passwort” und Co. gibt es entsprechende Erweiterungen. Lastpass im Chrome Web Store

(Screenshot: Google) 

Mithilfe der Erweiterung „Clear Cache” könnt ihr mit einem Klick den Browser von Ballast und Cookies befreien. In den Optionen könnt ihr festlegen, welche Daten (App-Cache, Cookies, Downloads, Verlauf und weitere) aus welchem Zeitraum (Stunde, Tag, alles) ihr entfernen möchtet. Gerade bei der Webentwicklung ist eine unkomplizierte Methode, den Cache zu löschen, Gold wert. Clear Cache im Chrome Web Store

(Bild: Google) 

„Downloads – Your Download Box“ dient der schnelleren Verwaltung von Downloads. Die Extension zeigt den Download-Verlauf neben der Adressleiste an und listet alle zuletzt heruntergeladenen Dateien auf. Darüber hinaus bringt euch ein Link unter der jeweiligen Datei direkt zum Download-Ordner.

(Bild: Google) 
 

„Imagus” ist ein praktisches Plugin, mit dem ihr euch Thumbnails und andere Bilder einer Website in voller Größe ansehen könnt, ohne sie in einem neuen Fenster öffnen zu müssen. Um ein Bild zu vergrößern, müsst ihr einfach nur mit dem Maus-Cursor über das gewünschte Objekt fahren, schon wird es in einem Pop-up-Fenster angezeigt. Die Erweiterung wird auch für Firefox, Safari und Opera angeboten. Imagus im Chrome Web Store

(Bild: Google) 

Mit „Strict Workflow” könnt ihr konzentriert arbeiten, ohne euch ständig von den „wichtigeren“ Geschehnissen im Internet ablenken zu lassen. Das Plugin blockiert für eine Phase von 25 Minuten bestimmte Webseiten wie Facebook, YouTube, Reddit und weitere Prokrastinationsfallen. Anschließend werden diese Seiten für einen Zeitraum von fünf Minuten wieder freigegeben. Optional könnt ihr den Umfang der gesperrten Seiten erweitern sowie die Arbeits- und Pausenphasen verändern. Das aber wäre ja Cheating... Anstelle der blockierten Website wird euch eine rote Tomate angezeigt, was einen dezenten Hinweis auf die hinter dem Konzept stehende Konzentrationstechnik namens Pomodoro (Tomate) darstellt. Strict Workflow im Chrome Web Store

Ich hoffe, ihr könnt die eine oder andere Extension für euch verwenden. Habt ihr Favoriten? Dann schreibt sie uns gerne in einem Kommentar.