Cutting Edge Browsers and Their Development Tools

Dies ist eine spannende Zeit in der Welt der Browser. Trotz eines holprigen Morgens verzeichnete Firefox 3 über 8 Millionen Downloads bei seiner Veröffentlichung. Mittlerweile sind es über 24 Millionen. Ich wette, viele von Ihnen gehören zu diesen Downloadern, ich war es auf jeden Fall =)

Ich wette, viele von Ihnen erledigen Ihr Webdesign und Ihre Entwicklung in Firefox. In Firefox scheinen die Dinge einfach so zu funktionieren, wie Sie es erwarten. Außerdem verfügt er über eine Fülle von unschätzbaren Entwicklungswerkzeugen wie die Web Developer Toolbar und Firebug. Wenn Sie noch nie von Firebug gehört haben oder es derzeit nicht verwenden, habe ich ein einführendes Screencast dazu erstellt, das Sie sich ansehen können.

Die Möglichkeit, das gesamte DOM einer Webseite nach dem Rendern anzuzeigen und zu manipulieren, ist unglaublich leistungsfähig. Ich bin mir nicht sicher, ob Firebug das erste jemals erstellte Werkzeug dafür war (ich bezweifle es), aber es hat es sicherlich populär gemacht. Die Art und Weise, wie es funktioniert, indem es Teil des Browsers selbst ist, hat ein neues Paradigma von browserspezifischen Entwicklungswerkzeugen eingeleitet. Werfen wir einen Blick auf alle Browser und ihre neuesten Angebote.

Firefox 3 und Firebug 1.2

Hier muss nicht viel gesagt werden, diese Standardkombination hat alles, was gut ist. Fehlererkennung, einfach zu bedienende „Inspect“-Option zum Herunterbrechen des Codes auf das, was Sie wirklich sehen müssen, Performance-Tests, Anzeige des vollständigen DOM, Live-Bearbeitung, eine Konsole...

Sie können Firefox 3 von der regulären Mozilla Download-Seite erhalten. Damit Firebug mit Firefox 3 funktioniert, benötigen Sie die neueste Beta-Version, Firebug 1.2, die nur von der Firebug Releases-Seite erhältlich ist.

 

Opera 9.5 und Dragonfly

Keine separate Download erforderlich, Opera 9.5 wird automatisch mit den Dragonfly-Entwicklungswerkzeugen gebündelt. Aktivieren Sie es, indem Sie zu Tools > Erweitert > Entwicklertools gehen.

Sehr ähnlich wie Firebug, das Debug-Menü erscheint von unten im Browserfenster, kann aber optional abgetrennt werden. Sie können das vollständige DOM sehen und es unterstützt „Element durch Klicken finden“, was sehr nützlich ist. Sie können den „vollständigen berechneten Stil“ sowie die CSS-Regeln, die auf dieses Element angewendet werden, sehen. Überschriebene Regeln werden ebenfalls angezeigt, nur ausgegraut. Weitere Firebug-ähnliche Funktionen sind eine Fehlerkonsole und eine „Layout-Ansicht“, die die Breite/Höhe, den Innenabstand, den Rand und den Außenabstand des Elements anzeigt.

Dragonfly ist sehr neu, und ich denke, sie haben noch einen langen Weg vor sich, bevor es die Qualität und Benutzerfreundlichkeit von Firebug erreichen kann, aber es bietet einige überzeugende, einzigartige Funktionen. Erstens dürfen wir nicht vergessen zu erwähnen, dass dieses Werkzeug eine große Hilfe ist, um speziell für Opera zu debuggen. Firebug kann dabei sicher nicht helfen. Zweitens ist Dragonfly eine „Hybridanwendung“, was bedeutet, dass es teilweise eine Web-App und teilweise eine Desktop-App ist. Es liegt im lokalen Speicher, wird aber bei jeder neuen Version sofort aktualisiert, ohne dass manuell eine neue Version heruntergeladen werden muss. Drittens hat Opera einen guten Marktanteil bei mobilen Browsern. Sie können mobile Geräte an Ihren Computer anschließen und auf Ihrem Computerbildschirm debuggen, was für die mobile Fehlersuche meiner Meinung nach immens nützlich sein könnte. Viertens beinhaltet das JavaScript-Debugging einen Schritt-für-Schritt-Modus, der meiner Vorstellung nach sehr nützlich sein könnte.

Dragonfly fehlen derzeit einige wichtige Funktionen, wie z. B. das Live-Bearbeiten Ihres CSS. Diese Funktion ist für Alpha 2 geplant, die bald kommt.

 

Internet Explorer 8 und Entwicklertools

Die IE 8 Beta wird mit den bereits installierten Entwicklertools ausgeliefert. Sie können die IE Developer Toolbar auch für IE 7 erhalten, wenn Sie diese installiert haben. Ich fand die IE Developer Toolbar unter IE 7 fehlerhaft und habe mich stattdessen für DebugBar entschieden, das ungefähr die gleiche Funktionalität bietet. Ich stelle mir vor, wenn IE 8 offiziell veröffentlicht wird, werden die Entwicklertools als separater Download verfügbar sein.

Ich denke, die Funktion „Element per Klick auswählen“ in den Entwicklertools funktioniert ziemlich gut, kann aber Firebug immer noch nicht das Wasser reichen, wie einfach das Bewegen der Maus über den Bildschirm verschiedene Elemente hervorhebt. Der Style-Viewer ist etwas umständlich, da er Stilregeln nach ihrer Herkunft gruppiert, beginnend mit dem obersten Elternteil. Das erscheint mir rückwärts gerichtet, da die meisten dieser Regeln längst überschrieben sind. Sie können sie auch nicht live bearbeiten, was ein Nachteil ist, aber Sie können einzelne Regeln mit einem einzigen Klick ein- und ausschalten, was eine große Hilfe ist.

Ähnlich wie bei Dragonfly ist die Tatsache, dass dieses Werkzeug überhaupt existiert, eine enorme Hilfe für Designer und Entwickler, die in IE debuggen müssen. Ja, es gibt sogar JavaScript-Debugging-Tools (mit nützlichen Dingen wie Breakpoints) in diesem Werkzeug. Denken Sie daran, dass auf Windows-Systemen nur eine Version von IE gleichzeitig installiert sein kann. Wenn Sie also auf IE 8 aktualisieren, ist Ihre reguläre IE 7-Version weg. IE 8 kann jedoch „IE 7 emulieren“, sodass Sie nicht komplett ohne Orientierung sind.

Für das Testen mehrerer IE-Versionen (wenn auch ohne Entwicklertools) sollten Sie sich IE Tester ansehen.

Safari 4 (Developer Preview) und Web Inspector

Die aktuelle öffentliche Version von Safari (3) hat einige ziemlich coole Werkzeuge als Teil des Web Inspectors. Der Visualisierer zur Anzeige der Ladezeiten der verschiedenen Elemente der Seite ist unübertroffen. Aber Safari 4 (Developer Preview), das kostenlos für ADC-Mitglieder heruntergeladen werden kann, bietet noch mehr interessante Entwicklertools. Wenn Sie es ausprobieren möchten, ist es eine kostenlose Anmeldung und dann gehen Sie einfach in den „Downloads“-Bereich der ADC-Website.

Der Web Inspector ist mit Abstand der eleganteste aller hier behandelten Entwicklungswerkzeuge. Er verfügt über eine wirklich schöne Codehervorhebung und alles sieht und funktioniert sehr reibungslos und sauber. Eine schöne Erfrischung nach der Verwendung der IE-Entwicklertools. Bemerkenswert ist das Fehlen einer klaren Möglichkeit, ein zu debuggendes Seitenelement per Klick auszuwählen. Ich glaube, jemand hat mir mal gesagt, dass es einen Weg gibt, aber ich habe ihn inzwischen vergessen und finde ihn nicht mehr. Vielleicht habe ich geträumt. Sie können jedoch Elemente im Code anklicken und sie im Browserfenster hervorheben lassen.

Live-CSS-Bearbeitung ist verfügbar, was nett ist, aber Sie können Stile einfach „ausschalten“, wie Sie es mit Firebug oder den IE-Entwicklertools tun können. Eine Layout-Ansicht (genannt „Metrics“) ist verfügbar, um eine visuelle Darstellung der berechneten Breiten und Innenabstände usw. anzuzeigen. Skript-Debugging ist vorhanden, ebenso wie eine echte Live-Befehlszeilenkonsole, was nett anzusehen ist. Symbole unten rechts sind eine direkte Übernahme von Firebug, aber sie sind sehr nützlich, um Sie sofort vor Seitenfehlern zu warnen.

 

Meinungen

Nutzt jemand von Ihnen diese Tools im Vollzeit-Debugging? Ich bin sicher, Sie können erkennen, dass ich selbst ein Firebug-Nutzer bin, aber ich bin extrem glücklich, dass wir so leistungsstarke Debugging-Tools für alle wichtigen Browser haben, falls wir browserspezifische Fehlerbehebungen durchführen müssen (wie, äh, ständig).

Fühlen Sie sich frei, Ihre Gedanken zu teilen, wenn Sie umfangreichere Erfahrungen mit einem dieser Tools haben.