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
Mit Eye Dropper kannst du die verwendeten Farbwerte auf Webseiten bestimmen und speichern.
2. MeasureIt
Willst du wissen, wie breit die Sidebar deiner Lieblings-Webseite ist? Mit MeasureIt kannst du es ganz einfach nachmessen.
3. Lorem Ipsum Generator
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
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
Color Picker gibt dir den HEX oder RGB-Farbwert jeder ausgewählten Farbe, zusätzlich kannst du eigenen Farbwerte erzeugen.
6. Aviary Screen Capture
Mit Aviary Screen Capture kannst du Screenshots einer Seite direkt an das Online-Tool Aviary weiterleiten, und das Bild dort weiterbearbeiten.
7. Picnik
Noch ein Tool mit dem du Bilder oder ganze Screens speichern kannst, um sie dann mit dem Bildbearbeitungs-Tool Picnik zu bearbeiten.
8. Snippy
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
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
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
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
Resolution Test zeigt Ansichten deiner Webseite in verschiedenen Screen-Auflösungen an.
13. Web Developer Toolbar
Die Chrome Variante des beliebten Addons hilft ebenfalls mit etlichen praktischen Features bei der Programmierung und Fehleranalyse deines Codes.
14. Speed Tracer
Speed Traver analysiert, welche Elemente deiner Webseite das Laden im Browser verlangsamen.
15. Copy without Formatting
Du benötigst Text ohne Formatierung? Dann ist diese praktische Extension ist genau das Richtige für dich.
16. Chrome SEO
Page Ranks, Backlinks, Anzahl der Bookmarks…die Chrome SEO Extensions weiss einfach alles.
17. BuildWith
Mit BuildWith erfährst du welche Tools, Plugins, JavaScript-Libraries für eine Webseite verwendet werden.
18. Plain Clothes
Plain Clothes zeigt dir alle Webseiten nackt, also ohne CSS-Formatierung an.
19. Chrome Sniffer
Ein praktische Extensions mit der du schnell herausfinden kannst, auf welchem CMS, Blog-Plattform, Shopsystem eine Webseite aufgebaut ist.
20. Domain Availability Checker
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!
Hallo zusammen, tolle Sammlung die mir sehr zuspricht. Wenn ihr jetzt noch aus Resolution Text Resolution Test macht stimmt alles :-)
*schlauscheisser aus*
Vg
Oli
@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
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
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.
@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 :-)
Tolle Hinweise !besten Dank, sie helfen mir sehr mit dieser tollen Liste. Grüße
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.
Danke dir für die interessante Zusammenstellung – da musste ich doch meinen Chrome direkt ein bisschen erweitern :)
Tolle Liste! Danke!
Vielen Dank für die Adds, nutze Chrome nun viel öfter.
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.
You made my day! Wirklich super Tipps. *Danke! Eure Seite ist toll.*
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
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