Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Sebastian Fiele 23. Mai 2012

Die besten Browsererweiterungen für die Webentwicklung

Bei der Entwicklung von Webseiten ist der Browser ein wich­ti­ges Hilfsmittel gewor­den. Früher waren Browser aus­schließ­lich rei­ne Seitenbetrachter, was sich über die Jahre stark geän­dert hat. Heutzutage gibt es für fast jeden Vertreter sei­ner Gattung tau­sen­de mehr oder weni­ger nütz­li­che Erweiterungen, die nicht nur dem Developer das Leben leich­ter machen wol­len. In die­ser Masse ver­liert man schnell die Übersicht. Vor allem, wenn man mit mehr als einem Weltnetz-Blätterer arbei­tet. Deswegen haben wir die Sammlungen der drei belieb­tes­ten Browser durch­fors­tet und für jeden ein paar Highlights her­aus gesucht.

Firebug (Firefox), Developer Tools (Chrome), Dragonfly (Opera)
Firebug ist das Urgestein der Entwickler-Tools und wur­de zum Vorbild für ande­re Browserhersteller, die ähn­li­che Tools fest in den Browser inte­grier­ten. Im Chrome hei­ßen sie schlicht Developer Tools. Diese machen ihrem Namen alle Ehre und bie­ten – wie Firebug – ein gutes Set an Werkzeugen. Bei Opera heißt das ähn­lich funk­ti­ons­rei­che Pendant Dragonfly.

 

Web Developer (Firefox, Chrome),  Developer Briefcase (Opera)
Hier erhal­ten Sie eine Erweiterung, die nahe­zu alles bie­tet, was man bei der Erstellung brau­chen kann. Eine ein­fa­che Farbpipette, ein Bildschirmlineal und wei­te­re Tools sind vor­han­den. Die Opera-Version des Web Developers bie­tet zwar etwas weni­ger Werkzeuge, aber immer noch genug Funktionen, den Alltag zu erleich­tern.

 

Pendule (Chrome)
Pendule ähnelt Web Developer, bie­tet aller­dings einen etwas klei­ne­ren Umfang. Dadurch wirkt die Erweiterung etwas auf­ge­räum­ter und über­sicht­li­cher.

 

YSlow (Firefox, Chrome, Opera)
Manchmal ist die eige­ne Webseite rela­tiv lang­sam und es ist nicht immer leicht, die Bremsen zu fin­den. Hier kommt Yslow ins Spiel. Das Tool erstellt eine klei­ne Analyse und zeigt in einer Liste ein paar Tipps zu wei­te­ren Optimierungsmöglichkeiten.

 

Colorzilla (Firefox, Chrome)
Anfangs war Colorzilla eine ein­fa­che Farbpipette. Mittlerweile hat es sich zu einem prak­ti­schem Allround-Farbwerkzeug ent­wi­ckelt. So las­sen sich jetzt auch CSS3-Verläufe gene­rie­ren.

 

Dust-me Selectors (Firefox, Opera)
Bei der Entwicklung blei­ben öfters nicht benö­tig­te CSS-Selektoren übrig. Duster durch­sucht alle ver­link­ten Stylesheets nach Selektoren, ver­gleicht sie mit den auf der aktu­el­len Seite ver­wen­de­ten und zeigt, wel­che nicht benö­tigt wer­den. Leider gilt das Ergebnis nur für die aktu­el­le Seite und nicht das gan­ze Projekt.

 

CSScan (Chrome)
Einmal akti­viert, lie­fert CSScan die rele­van­ten Informationen zu jedem Element, das mit der Maus berührt wird.

 

IE Tab (Chrome, Firefox)
Will oder muss man tes­ten, ob die frisch ent­wi­ckel­te Seite im Internet Explorer kor­rekt dar­ge­stellt wird, eig­net sich die­se Erweiterung. Sie lädt die gewünsch­te Seite mit der Engine des Internet Exploders ( IE7IE9 ) in einem neu­en Tab.

 

FireFTP (Firefox)
Ein schlich­ter FTP-Client, der direkt im Browser inte­griert ist und optio­nal direkt mit allen ftp:// links ver­knüpft wer­den kann.
Für klei­ne­re Aufgaben ist das Tool durch­aus nütz­lich, jedoch wür­de ich für die Arbeit einen voll­wer­ti­gen FTP-Client emp­feh­len.

 

Tilt 3D (Firefox)
Tilt ist eine ein­zig­ar­ti­ge Erweiterung, die mit WebGL eine topo­gra­fi­sche 3D-Darstellung lie­fert, die sich frei dre­hen und zoo­men lässt und die ein­zel­nen Elementarten farb­lich kenn­zeich­net. Kollege Dieter Petereit schrieb schon mal aus­führ­li­cher für das T3N Magazin dar­über.

(dpe)

Sebastian Fiele

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

5 Kommentare

  1. ColorZilla
    Bei einer loka­len Seite kann ich bei Chrome kei­ne Farbwerte auf­neh­men.
    Meldung: Chrome doesn‘t allow picking colors from local pages.
    Gibt es hier­zu eine Alternative?

    Stephan Schneider

  2. Sehr prak­tisch ist auch PrefBar. Es sieht nicht beson­ders hübsch aus, bie­tet dafür aber sehr (!) schnel­len Zugriff auf nahe­zu belie­bi­ge Browsereinstellungen, per Checkbox, Dropdown-Liste oder Button in einer eige­nen Toolbar. Ich habe es instal­liert, weil ich damit per Dropdown die Seitensprache umstel­len kann und so die Übersetzung mei­ner Webseiten tes­ten kann. Aber auch Schriften, Styles, Farben kön­nen kurz­zei­tig deak­ti­viert wer­den, oder ande­re Einstellungen wie die User-Agent-Kennung. Die (De)Aktivierung der Toolbar geht schnell mit F8 (ähn­lich dem Hotkey F12 für Firebug). Alle Controls sind frei kon­fi­gu­rier­bar.

  3. Für Chrome wür­de ich noch “LiveReload” emp­feh­len. Ansonsten hat Chrome auch noch eini­ge ver­steck­te Optionen, wel­che man sich mal anschau­en soll­te: chrome://flags/ z.B.: Entwicklertool-Experimente akti­vie­ren, Download-Wiederaufnahme akti­vie­ren, SPDY, etc.

    Mfg Lars

  4. Für Firefox kann ich noch “Source Code Chart” emp­feh­len. Zum einen bie­tet es die Möglichkeit den Quellcode for­ma­tiert anzei­gen zu las­sen (ganz nett, aber viel­leicht auch etwas unüber­sicht­lich), aber zum ande­ren (und das fin­de ich beson­ders gut gelun­gen) auch Elemente auf der Seite zu unter­su­chen (HTML und CSS) und dabei auch wie bei Firebug zu mani­pu­lie­ren.

    Von Google gibt es außer­dem auch noch PageSpeed für Chrome und Firefox. Dürfte wohl ähn­lich wie YSlow sein.

Schreibe einen Kommentar

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