PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

Firebug und Webdeveloper Toolbar

Heute wollte ich euch von drei, für mich inzwischen unverzichtbaren, Helfern erzählen. Wer auch nur einen davon noch nicht kennt, kann hier noch was für sich mitnehmen.

Fangen wir beim Internet Explorer an. Dafür ist jetzt gerade die Final Version der Developer Toolbar erschienen. Mit dem Tool könnt ihr schön im DOM Tree eurer Seite navigieren, direkt auf Elemente klicken, um die CSS Eigenschaften von Elementen anzusehen. Vor allem für zwei Dinge gut.

  1. Wenn ihr dynamisch per JS neue CSS Eigenschaften vergeben wollt, um zu überprüfen, ob da auch alles angekommen ist.
  2. Wenn ihr große CSS Vererbungshierarchien habt, kann man sehr gut sehen, welche Eigenschaft von welcher Regel übernommen wird.
  3. Ihr könnt auch zur Laufzeit das CSS verändern, damit ihr schon mal testen könnt, wie eine Änderung aussehen würde, also spart man sich das CSS bearbeiten, speichern, Seite neu laden.

Für alle bei denen die Toolbar scheinbar nicht funktioniert noch ein Tipp. Ihr müsst in den Internet Options ->  Advanced -> Enable 3rd Party Extensions aktivieren. Hatte ich nach meinem Update jedenfalls Probleme mit, aber jetzt tut es einwandfrei.
Für den Firefox haben wir gleich zwei nützliche Tools am Start. Zum einen ist das der Web Developer. Mit der Toolbar kann man zum Beispiel sich anschauen, wie eine Seite aussieht, wenn man CSS ausschaltet, oder JavaScript deaktiviert hat. Man kann sich auch direkt den gesamten CSS oder Javascript Code in einem neuen Fenster anzeigen lassen, damit spart man sich das mühselige Öffnen per Hand. Was ich auch nützlich finde ist die Möglichkeit Session oder Domain Cookies zu löschen. Damit kann man seine Anwendungen testen, was passiert, wenn man ne Weile nicht aktiv war, oder klappt das Merken des Benutzernamens.

Als zweites gibt es für den Firefox etwas ähnliches wie für den Internet Explorer. Firebug kann aber noch ein bisschen mehr. Firebug ist nämlich nicht nur auf CSS beschränkt, sondern kann euch auch noch helfen den Javascript Code zu debuggen. Das ist super, um kleine Fehler tief in einer Funktionshirarchie zu finden, wenn ihr beispielsweise schon mit AJAX oder ähnlichen Späßen arbeitet und euch wundert, wo denn eure Daten bleiben.

Also schaut euch die Teile an, alle drei gehören bei mir mittlerweile zu den ersten Tools, die installiert werden, wenn ich meinen Rechner neu aufsetze.

  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Nils Hitze meint dazu:

14. Mai 2007 um 11:57

Also mit der Developer Toolbar hab ich noch nichts gemacht, aber die anderen beiden braucht man einfach. Weiss nicht wie ich ohne die “populate Formfields”-Funktion der Webdeveloper-Toolbar leben konnte und was ich ohne die “Net/Response”-Anzeige von Firebug machen würde bei AJAX.

Klasse Tools.

timi meint dazu:

16. Mai 2007 um 13:16

Also ich liebe die Developer Toolbar - es gibts kein bessere Instrument um so viele Webtechniken gleichzeitig zu manipulieren oder zu überwachen… Firebug ist bisher bei mir bei großen JS Frameworks und Applikationen immer hängengeblieben - ich mach am besten mal ein Upgrade auf ne neue Version…

Sergej meint dazu:

5. Juni 2007 um 15:32

Geht mir genau so wie Nils: Firebug ist zu meinem Haustier geworden. Muss ich jetzt schauen, was für ein DevTool ich für Safari nehme…

RSS für Kommentare zu diesem Artikel · TrackBack URI

Schreib Deine Meinung