Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Listicle

35 praktische Chrome-Erweiterungen für Designer und Entwickler

Hier gibt es einige Dutzend Werkzeuge für Webdesigner und Webentwickler. (Foto: Pixabay)

Googles Chrome-Browser steht auch bei Designern und Entwicklern hoch im Kurs. Eben für jene unter euch haben wir 35 Chrome-Erweiterungen zusammengestellt, die euch die Arbeit erleichtern werden. 

Googles Chrome ist für die meisten Webentwickler vor allem auch in der Entwicklung die erste Wahl. Das hat sicherlich teilweise etwas mit Marktanteilen zu tun, liegt aber auch an der guten Performance und den großartigen DevTools sowie der nahezu unüberschaubaren Flut an Erweiterungen, die den Funktionsumfang des Browsers erweitern und ihn so zu einem noch mächtigeren Werkzeug machen. Im folgenden Beitrag findet ihr einen Haufen solcher Chrome-Erweiterungen. Dabei haben wir uns auf jene fokussiert, die nicht nur, aber doch immer besonders für Designer und Developer geeignet sind.

Chrome-Erweiterungen: Kategorie Design-Tools

Prototyping im Browser ist stark im Kommen. Klar, dass man dann auch einen Haufen weiterer Tools direkt im Browser nutzen möchte. Die folgenden Helferlein erleichtern so manchen Alltags-Task.

Page Ruler und Dimensions

„Page Ruler“ vermisst eure Webseiten. (Screenshot: t3n)
„Page Ruler“ vermisst eure Webseiten. (Screenshot: t3n)

„Page Ruler“ von Peter Newnham ist eine Extension, mit deren Hilfe du eine Website im Browser vermessen kannst. Markiere ein Element und du erhältst dessen Breite und Höhe sowie die Abstände zu den vier Rändern des Browserfensters. Besonders praktisch ist, dass du das Tool mit dem Shortcut ALT+P ein- und ausblenden kannst. So ist es schnell bei der Hand und schnell wieder weg.

Obwohl „Page Ruler“ seit zwei Jahren kein Update mehr gesehen hat, läuft es im aktuellen Chrome einwandfrei und versieht seinen Dienst tadellos.

Page Ruler
Page Ruler
Entwickler: frankmedison
Preis: Kostenlos

Eine Alternative ist die Erweiterung „Dimensions“. Diese misst von alleine die Abstände zwischen benachbarten Elementen. Dazu platziert ihr den Mauszeiger einfach zwischen die jeweiligen Elemente. Zwei Linien zeigen an, welcher Abstand gemessen wird, nämlich jeweils der vertikale und horizontale Abstand zu benachbarten Elementen.

Dimensions
Dimensions
Preis: Kostenlos

Responsive Inspektor

Responsive-Inspector-chrome
„Responsive Inspector“ überwacht deine Media-Queries. (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.

Responsive Inspector
Responsive Inspector
Entwickler: outof.me
Preis: Kostenlos

LivePage

Das Neuladen einer Website gehört wohl zu den am häufigsten 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 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.

„Live Page” kostet 5,99 Euro einmalig. Unser WP-Appbox-Plugin, das wir für die Darstellung der Store-Informationen einsetzen, zeigt leider fälschlicherweise an, es sei kostenlos.

LivePage
LivePage
Preis: Kostenlos

Text

chrome-text
Mit dieser Erweiterung schreibt ihr direkt in eurem Chrome-Browser. (Bild: Google)

„Text“ ist ein simpler Text-Editor für Chrome und selbstredend Chrome OS. Man kann mehrere Dokumente gleichzeitig geöffnet haben, verfügt über Syntax-Highlighting und synchronisiert seine Daten mit Google Drive. Wer auf der Suche nach einem Text-Editor mit Markdown-Support ist, sollte sich „Textdown“ näher ansehen.

Text
Text
Entwickler: text.app
Preis: Kostenlos

Web Developer

„Web Developer” ist der Bolide unter den Chrome-Erweiterungen. (Screenshot: t3n)
„Web Developer“ ist der Bolide unter den Chrome-Erweiterungen. (Screenshot: t3n)

Die Extension „Web Developer“ von Chris Pederick ist ein Urgestein im Markt der Browsererweiterungen und seit vielen Jahren vor allem Nutzern des Firefox unverzichtbar geworden. Seit einiger Zeit bietet Chris die Extension auch für den Chrome-Browser an. Tatsächlich ist Web Developer die wohl umfangreichste Tool-Sammlung für Designer und Developer, die am Markt ist. Pederick vereint die Features vieler anderer hier vorgestellter Extensions an einer Stelle und macht Web Developer damit zu einer Art Schweizer Taschenmesser für Web-Entwickler.

Ich verwende die Extension dennoch nicht für alles, was sie kann, da mir kleinere Tools teilweise den unkomplizierteren Zugang ermöglichen. 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.

Du kannst aber auch JavaScript, CSS, Bilder bearbeiten, Cookies abschalten oder Websites validieren. Alle Features des Erweiterungsboliden aufzuzählen, sprengt den Rahmen dieser Liste.

Web Developer
Web Developer
Entwickler: chrispederick.com
Preis: Kostenlos

Window Resizer

MIt dem „Window Resizer” testet ihr responsive Webseiten. (Screenshot: Google)
MIt dem „Window Resizer“ testet ihr responsive Webseiten. (Screenshot: 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
Window Resizer
Entwickler: Ionuț Botizan
Preis: Kostenlos

ColorZilla

colorzilla
ColorZilla zeigt euch, welche Farben auf einer Website eingesetzt werden. (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, schon wird angezeigt, welcher HTML-Code sich dahinter verbirgt. Außerdem könnt ihr Farbverläufe erstellen und vorlagenfrei Farben aus einer Farbpalette auswählen.

ColorZilla
ColorZilla
Entwickler: colorzilla.com
Preis: Kostenlos

Polarr Photo Editor

Eigentlich eine App und keine Chrome-Extension: Polarr Photo Editor. (Screenshot: Polarr)
Eigentlich eine App und keine Chrome-Extension: Polarr Photo Editor. (Screenshot: Polarr)

Keine Lust, Geld für ein Bildbearbeitungs-Tool auszugeben? Kein Problem, denn mit dem „Polarr Photo Editor“, der mittlerweile schon in der dritten Auflage veröffentlicht wurde, könnt ihr eure Bilder direkt im Browser-Fenster bearbeiten und mit Filtern versehen. Zwar kommt die Anwendung nicht an ein professionelles Tool heran, für kleine Aufgaben zwischendurch reicht es aber allemal.

Polarr Photo Editor
Polarr Photo Editor
Entwickler: polarr.co
Preis: Kostenlos

Awesome Screenshot und Fireshot

awesome-screenshot
Ein praktisches Werkzeug zur Erstellung von Screenshots. (Screenshot: t3n)

„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 sogar 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 ist die Extension „Fireshot“.

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Jens

Eine sehr gute Auflistung. Einige kannte ich noch gar nicht. Ich habe noch den robots.txt viewer (https://chrome.google.com/webstore/detail/robotstxt-viewer/agckgmkiigllflmahknlkhhhhmchodcb) installiert. Damit sehe ich direk in die robots.txt rein

Schönen Abend
Jens

Antworten
JeiBie

Ja super, wollte gerade LivePage installieren, da verlangen die 5.99€. Ihr sagt aber, dass die Extension kostenlos ist - was nun?

Antworten
Stafan Braun

entweder 5,99 bezahlen oder nicht installieren

Antworten
Dieter Petereit

Das ist leider ein Fehler unseres Plugins WP-Appbox, das die Erweiterung fälschlicherweise als kostenlos deklariert. Sorry. Ich habe es im Text ergänzt.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.