Aktuell werden wir von neuen Browserversionen nahezu erschlagen, nicht jeder ist aber für Entwickler geeignet. Ich bin seit jeher ein großer Firefox Fan, prüfe aber regelmäßig was die Konkurrenzbrowser so bieten und bin zuletzt aufgrund einer solchen Prüfung immerhin ein Jahr lang bei Google Chrome gelandet. Was sind also die Vor- und Nachteile der einzelnen Kandidaten, schauen wir uns die großen Vertreter einmal genauer an.
Getrennter Privat und Webworker Browser? In der Theorie sicher eine sinnvolle Idee, praktisch zeigt sich aber das sich das ohnehin nicht strikt trennen lässt, weswegen man gleich auf eine Einzelbrowser Lösung setzen sollte, die aber gut Strukturiert sein will. Daher werde ich nachfolgend immer darauf achten, dass wir die Browser so einrichten, dass diese nicht mit Tools zugemüllt werden und somit performant und übersichtlich bleiben.
Wie zu sehen sein wird, unterscheiden sich die Konsolen der einzelnen Browser nur noch unwesentlich, alle sind inzwischen mehr oder weniger dem Beispiel von Firebug gefolgt. Ich stelle also eher Besonderheiten heraus.
Firefox
Angefangen mit dem Brangenprimus Mozilla Firefox, ich greife hier schon zu Version 4 da zum Zeitpunkt der Erstellung des Artikels bereits der erste Release Candidate erschienen ist, die Final somit kurz bevorsteht.
Von Haus aus bringt Firefox wenig bis gar keine Unterstützung für Entwickler mit, was ja auch nicht weiter tragisch ist, die meisten User brauchen einen schlanken Browser und keine Entwicklertools. Lösungen per Modul bieten sich also an, an vorderster Front „Firebug“. Außerdem ist das Add-On WebDeveloper ganz sinnvoll. Nachdem die AddOns installiert sind richten wir uns noch ein paar Shortcuts ein, um schneller Zugriff auf die Funktionen zu haben. Dazu einfach einen Rechtsklick in einem freien Bereich auf Höhe der Adressbar machen und „Anpassen“ wählen, hier ziehen wir uns nun einmal das „Element Suchen“ von Firebug rechts neben das Suchfeld und das Zahnrad-Icon vom WebDevoloper Modul. So behalten wir den Platz im Browser zum Surfen und haben trotzdem schnellen Zugriff auf die Funktionen.
Außerdem oft benötigt wird das „Fireshot“ (alternative: „Awesome Screenshot“) genannte Screenshot Modul, „MeasureIT“ als Lineal (noch kein FF4 Support) und „ColorZilla“ als Farbwähler.
Chrome
Nun zu Google Chrome, Chrome bietet von Haus aus eine sehr komfortable Entwicklerkonsole an, aufzurufen per [STRG]+[GROßSTELLTASTE]+[I]. Die Lösung ist sehr übersichtlich gestaltet, allerdings kann man sich dem Gefühl nicht erwehren das sich in Firebug etwas flüssiger arbeiten lässt. Vom Funktionsumfang her, kann man mit der Chrome Konsole ebenso arbeiten wie auch mit Firebug.
In Chrome ist weiterhin das Modul „Awesome Screenshot“, wesentlich moderner aufgemacht und mit größerem Funktionsumfang, das Pendant schlechthin für Fireshot im Firefox. Die vorhandenen Colorpicker für Chrome, funktionieren meiner Erfahrung nach miserabel, von daher verzichte ich hier auf eine Modulempfehlung. „MeasureIT“ hingegen gibt es ebenfalls für Chrome.
Internet Explorer
Bietet inzwischen ebenfalls eine integrierte Entwicklerkonsole, die es auch ermöglicht ältere Renderengines zu emulieren. Aufzurufen ist diese über [F12], die Möglichkeit der Emulation ist oberhalb zu finden „Browser Engine“ und „Document Mode“. Microsoft hat hier gleich noch einige Features integriert die auch das Web Developer Modul im Firefox bieten. Es lässt sich so beispielsweise CSS abschalten um den sauberen Aufbau seiner HTML Dokumente zu prüfen, Auflösungen lassen sich emulieren, links zur W3C Validierung stehen zur Verfügung, Lineal und Farbwähler sind vorhanden und vieles mehr.
In der CSS Konsole lässt sich per Rechtklick ein Selektor per „Add Rule“ hinzufügen, diesem dann wiederrum per „Add attribute“ Attribute, das bietet so keine andere Konsole. Allerdings ist mir diese Rechtsklick-Lösung zu umständlich, wenigstens Attribute sollten sich, wie in Firebug, per Doppelklick hinzufügen lassen.
Hier hat Microsoft gelernt, das kann man wirklich nicht anders sagen. Der IE9 hat an vielen Ecken, wie eben bei den Entwicklertools, zugelegt so langsam sehe ich tatsächlich wieder Hoffnung für den Microsoft Browser.
Opera
Opera 11 bringt ebenfalls von Haus aus eine Entwicklerkonsole namens „Dragonfly“ mit, diese lässt sich wie in Chrome auch per [STRG]+[GROßSTELLTASTE]+[I] aufrufen. Besonderheit ist hier, dass beim Aufruf sofort die DOM Elementauswahl gestartet wird, gewöhnungsbedürftig aber sinnvoll. Außerdem fällt sofort auf das eine Art Grid (Hilfslinien) angezeigt wird, keine Frage, sehr nette Hilfe zur Ausrichtung von Elementen.
Was mir hier fehlt ist die Möglichkeit den Element Style zu bearbeiten, zum Testen von Styles eigentlich unabdingbar. Außerdem wurde auf eine Autovervollständigung verzichtet und generell scheint mir das editieren von Stylesheets eher Benutzerunfreundlich, schade.
Fazit
Kurz und knapp: Firefox bleibt mein Favorit, als perfekte Kombination von Privat- und Webworkerbrowser.