Browser

Die besten Browsererweiterungen für die Webentwicklung

23. Mai 2012
von

Bei der Entwicklung von Webseiten ist der Browser ein wichtiges Hilfsmittel geworden. Früher waren Browser ausschließlich reine Seitenbetrachter, was sich über die Jahre stark geändert hat. Heutzutage gibt es für fast jeden Vertreter seiner Gattung tausende mehr oder weniger nützliche Erweiterungen, die nicht nur dem Developer das Leben leichter machen wollen. In dieser Masse verliert man schnell die Übersicht. Vor allem, wenn man mit mehr als einem Weltnetz-Blätterer arbeitet. Deswegen haben wir die Sammlungen der drei beliebtesten Browser durchforstet und für jeden ein paar Highlights heraus gesucht.

Firebug (Firefox), Developer Tools (Chrome), Dragonfly (Opera)
Firebug ist das Urgestein der Entwickler-Tools und wurde zum Vorbild für andere Browserhersteller, die ähnliche Tools fest in den Browser integrierten. Im Chrome heißen sie schlicht Developer Tools. Diese machen ihrem Namen alle Ehre und bieten – wie Firebug – ein gutes Set an Werkzeugen. Bei Opera heißt das ähnlich funktionsreiche Pendant Dragonfly.

 

Web Developer (Firefox, Chrome),  Developer Briefcase (Opera)
Hier erhalten Sie eine Erweiterung, die nahezu alles bietet, was man bei der Erstellung brauchen kann. Eine einfache Farbpipette, ein Bildschirmlineal und weitere Tools sind vorhanden. Die Opera-Version des Web Developers bietet zwar etwas weniger Werkzeuge, aber immer noch genug Funktionen, den Alltag zu erleichtern.

 

Pendule (Chrome)
Pendule ähnelt Web Developer, bietet allerdings einen etwas kleineren Umfang. Dadurch wirkt die Erweiterung etwas aufgeräumter und übersichtlicher.

 

YSlow (Firefox, Chrome, Opera)
Manchmal ist die eigene Webseite relativ langsam und es ist nicht immer leicht, die Bremsen zu finden. Hier kommt Yslow ins Spiel. Das Tool erstellt eine kleine Analyse und zeigt in einer Liste ein paar Tipps zu weiteren Optimierungsmöglichkeiten.

 

Colorzilla (Firefox, Chrome)
Anfangs war Colorzilla eine einfache Farbpipette. Mittlerweile hat es sich zu einem praktischem Allround-Farbwerkzeug entwickelt. So lassen sich jetzt auch CSS3-Verläufe generieren.

 

Dust-me Selectors (Firefox, Opera)
Bei der Entwicklung bleiben öfters nicht benötigte CSS-Selektoren übrig. Duster durchsucht alle verlinkten Stylesheets nach Selektoren, vergleicht sie mit den auf der aktuellen Seite verwendeten und zeigt, welche nicht benötigt werden. Leider gilt das Ergebnis nur für die aktuelle Seite und nicht das ganze Projekt.

 

CSScan (Chrome)
Einmal aktiviert, liefert CSScan die relevanten Informationen zu jedem Element, das mit der Maus berührt wird.

 

IE Tab (Chrome, Firefox)
Will oder muss man testen, ob die frisch entwickelte Seite im Internet Explorer korrekt dargestellt wird, eignet sich diese Erweiterung. Sie lädt die gewünschte Seite mit der Engine des Internet Exploders ( IE7 – IE9 ) in einem neuen Tab.

 

FireFTP (Firefox)
Ein schlichter FTP-Client, der direkt im Browser integriert ist und optional direkt mit allen ftp:// links verknüpft werden kann.
Für kleinere Aufgaben ist das Tool durchaus nützlich, jedoch würde ich für die Arbeit einen vollwertigen FTP-Client empfehlen.

 

Tilt 3D (Firefox)
Tilt ist eine einzigartige Erweiterung, die mit WebGL eine topografische 3D-Darstellung liefert, die sich frei drehen und zoomen lässt und die einzelnen Elementarten farblich kennzeichnet. Kollege Dieter Petereit schrieb schon mal ausführlicher für das T3N Magazin darüber.

(dpe)

ist auch bekannt unter seinem Künstlernamen "Rawsta". Er ist freiberuflicher Grafik- und Webdesigner mit Nerd-touch.

Tags: , , ,

2 Kommentare zu „Die besten Browsererweiterungen für die Webentwicklung
  1. Stefan am 23. Mai 2012 um 19:54

    Für Firefox kann ich noch “Source Code Chart” empfehlen. Zum einen bietet es die Möglichkeit den Quellcode formatiert anzeigen zu lassen (ganz nett, aber vielleicht auch etwas unübersichtlich), aber zum anderen (und das finde ich besonders gut gelungen) auch Elemente auf der Seite zu untersuchen (HTML und CSS) und dabei auch wie bei Firebug zu manipulieren.

    Von Google gibt es außerdem auch noch PageSpeed für Chrome und Firefox. Dürfte wohl ähnlich wie YSlow sein.

  2. [...] → Die besten Browsererweiterungen für die Webentwicklung [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!