Tipps und Tools Webdesign

20 Google Chrome Extensions für Webdesigner und Programmierer

Wegen der praktischen Addons war Firefox bisher mein absoluter Lieblings-Browser. Doch die kleinen Helfer gibt es inzwischen auch für Google Chrome. Und die sogenannten Google Chrome Extensions haben wirklich so einiges zu bieten, um das Leben von Webdesignern und Programmierern zu versüßen. Come, have a look ;-)

1. Eye Dropper

Google Chrome Extensions für Webdesigner und Programmierer

Mit Eye Dropper kannst du die verwendeten Farbwerte auf Webseiten bestimmen und speichern.

2. MeasureIt

Google Chrome Extensions für Webdesigner und Programmierer

Willst du wissen, wie breit die Sidebar deiner Lieblings-Webseite ist? Mit MeasureIt kannst du es ganz einfach nachmessen.

3. Lorem Ipsum Generator

Google Chrome Extensions für Webdesigner und Programmierer

Falls du Blindtexte für dein Webdesign brauchst, hilft dir diese Chrome Erweiterung. Du kannst sogar bestimmen, wie viele Paragraphen oder Wörter du benötigst.

4. Pixlr Grabber

Google Chrome Extensions für Webdesigner und Programmierer

Mit dem Pixlr Grabber kannst du bestimmte Elemente einer Webseite oder einen kompletten Screenshot kopieren, und an das Bildbearbeitungs-Tool Pixlr weiterleiten oder auf deinem Computer speichern.

5. Color Picker

Google Chrome Extensions für Webdesigner und Programmierer

Color Picker gibt dir den HEX oder RGB-Farbwert jeder ausgewählten Farbe, zusätzlich kannst du eigenen Farbwerte erzeugen.

6. Aviary Screen Capture

Google Chrome Extensions für Webdesigner und Programmierer

Mit Aviary Screen Capture kannst du Screenshots einer Seite direkt an das Online-Tool Aviary weiterleiten, und das Bild dort weiterbearbeiten.

7. Picnik

Google Chrome Extensions für Webdesigner und Programmierer

Noch ein Tool mit dem du Bilder oder ganze Screens speichern kannst, um sie dann mit dem Bildbearbeitungs-Tool Picnik zu bearbeiten.

8. Snippy

Google Chrome Extensions für Webdesigner und Programmierer

Mit Snippy kannst du Elemente einer Webseite in einem Account speichern, um sie später wieder zu nutzen, z.B. in ein Google Dokument einzufügen.

9. Pendule

Google Chrome Extensions für Webdesigner und Programmierer

Pendule ist ein wahres All-Rounder Tool für Programmierer. Du kannst CSS oder JavaScript im Browser deaktivieren, den Quellcode einer Webseite analysieren, Farbwerte und Größen bestimmen und und und…

10. Firebug Lite

Google Chrome Extensions für Webdesigner und Programmierer

Firebug Lite ist auf jeden Fall ein »Must Have« für alle Programmierer. Das Tool anaylsiert den Code einer Webseite, und hilft so Fehler ausfindig zu machen.

11. IE Tab

Google Chrome Extensions für Webdesigner und Programmierer

Die IE Tab-Extension ist praktisch beim Test einer Webseite auf Browser-Kompatibilität. Mit einem Klick bekommst du eine Ansicht deiner Webseite im Internet Explorer.

12. Resolution Test

Google Chrome Extensions für Webdesigner und Programmierer

Resolution Test zeigt Ansichten deiner Webseite in verschiedenen Screen-Auflösungen an.

13. Web Developer Toolbar

Google Chrome Extensions für Webdesigner und Programmierer

Die Chrome Variante des beliebten Addons hilft ebenfalls mit etlichen praktischen Features bei der Programmierung und Fehleranalyse deines Codes.

14. Speed Tracer

Google Chrome Extensions für Webdesigner und Programmierer

Speed Traver analysiert, welche Elemente deiner Webseite das Laden im Browser verlangsamen.

15. Copy without Formatting

Google Chrome Extensions für Webdesigner und Programmierer

Du benötigst Text ohne Formatierung? Dann ist diese praktische Extension ist genau das Richtige für dich.

16. Chrome SEO

Google Chrome Extensions für Webdesigner und Programmierer

Page Ranks, Backlinks, Anzahl der Bookmarks…die Chrome SEO Extensions weiss einfach alles.

17. BuildWith

Google Chrome Extensions für Webdesigner und Programmierer

Mit BuildWith erfährst du welche Tools, Plugins, JavaScript-Libraries für eine Webseite verwendet werden.

18. Plain Clothes

Google Chrome Extensions für Webdesigner und Programmierer

Plain Clothes zeigt dir alle Webseiten nackt, also ohne CSS-Formatierung an.

19. Chrome Sniffer

Google Chrome Extensions für Webdesigner und Programmierer

Ein praktische Extensions mit der du schnell herausfinden kannst, auf welchem CMS, Blog-Plattform, Shopsystem eine Webseite aufgebaut ist.

20. Domain Availability Checker

Google Chrome Extensions für Webdesigner und Programmierer

Wenn du eine spontane Idee für eine neue Domain hast, erfährst du mit dieser Extensions sekundenschnell, ob die Domain noch zu haben ist.

Wie gefallen dir die Extensions von Google Chrome? Kennst du weitere Extensions, welche die tägliche Arbeit als Webworker erleichern? Ich freue mich wie immer auf deine Tipps!

Beteilige dich an der Diskussion

  1. Oli

    Hallo zusammen, tolle Sammlung die mir sehr zuspricht. Wenn ihr jetzt noch aus Resolution Text Resolution Test macht stimmt alles :-)
    *schlauscheisser aus*

    Vg
    Oli

  2. @Oli: Danke dir für den Hinweis, Oli, ist prompt erledigt :-) Du weißt ja, immer diese Freitage… ;-)

    Viele Grüße
    und ein schönes Wochenende
    Ellen

  3. Hallo Ellen,

    wirklich schöne Übersicht, da kann man den Chrome ja endlich auch zur Webentwicklung nutzen :)
    Nur ein kleiner Hinweis – du linkst auf die inoffizielle Firebug Version (= nicht vom Firebug Team). Diese wurde veröffentlicht als es noch keine offizielle gab. Der Autor empfiehlt mittlerweile selbst auf die Version des Firebug Teams umzusteigen („NOTE: Firebug lite team has made their own extension, I recommend you download it.“).

    Hier der Link zur offiziellen Version: http://bit.ly/bgteOR

  4. Sorry noch was vergessen: Besser als der Firebug sind übrigens die eingebauten „Chrome Developer Tools“. Einfach mal mit der rechten Maustaste irgendwo auf die Seite klicken und „Element überprüfen“ klicken.

  5. @Dennis: Genial! Vielen Dank für den Hinweis auf die offizielle Firebug-Verison. Hehe, so klappt das gleich viel besser ;-)

    Auch den Link im Artikel habe ich auf die offizielle Version geändert :-)

    In die Chrome Developer Tools habe ich bisher erst kurz reingeschaut. Ich möchte mir das aber unbedingt noch genauer anschauen. Sieht nämlich echt klasse aus, was man damit alles machen kann!

    Vielen herzlichen Dank auch für diesen Tipp, Dennis, und viele Grüße :-)

  6. Bin ja eigentlich Firefox-Extentions-Fan bisher,aber wenns bei Chrome mittlerweile genauso gute Werkzeuge gibt, lohnt sich sich die Nutzung vllt mehr als nur zum BrowserTest. Zumal FF4 meine Lieblings-Addons nichtmehr will, kann ein umschwenken doch mal neuen Adds die Chance geben.

  7. Danke dir für die interessante Zusammenstellung – da musste ich doch meinen Chrome direkt ein bisschen erweitern :)

  8. Hallo Ellen,

    vielen Dank für die sehr gute Übersicht. Nun steige ich definitiv um auf Chrome.
    Habe auch sofort alle meine Mitarbeiter dazu verdonnert…:-)

    Beste Grüße aus Bremen
    Jacky.

  9. Gefällt mir gut deine Liste!

    Einigen von den Tools kannte ich auch noch gar nicht, das macht sie für mich gleich noch viel besser. Ein Addon das bei mir ganz viel im Einsatz ist, ist Lightshot. Damit lassen sich ziemlich flott und einfach Screenshots in beliebiger Größe machen. Zumindest ich finds super praktisch..

    VG Alex

  10. Kai

    Hallo,

    gute Zusammenstellung! Viele davon nutze auch ich schon sehr lange.
    Ich hätte da noch etwas aus eigener Hand anzubieten: „PageLiner“ (http://goo.gl/RY4pRD)
    PageLiner ermöglicht das setzen von Hilfslinien auf Webseiten, wie man es von Photoshop kennt.
    Ich weiß, dass eine ähnliche Funktion bereits in der „Web Developer“-Extension vorhanden ist, welche jedoch nicht so viele Möglichkeiten in dem Bereich bietet.
    Der Vorteil an PageLiner ist, dass Chrome sich diese pro Webseite merkt und diese auch farblich verändert werden können.
    Von den anderen Features solltet ihr euch einfach selbst überzeugen. :)

    Gruß,
    Kai

Schreibe einen Kommentar

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