someone just +1′d this nice addon for firefox:
(thanks, conrad :)

Tilt visualizes the DOM in 3D and is a lot faster than i expected.

Although it’s flagged experimental it’s easily installed and works like a charm on my macbook with Firefox 6.

Definetly makes you think twice about your markup nesting level ;)

Wer kennt das nicht: man entwickelt mit JSON, will die AJAX Rückgabe kontrollieren und macht, wie gewohnt, im Firefox den Firebug auf und checkt unter Console den AJAX Request und sieht folgendes:

Nicht sehr erhellend! Total unübersichtlich! Nicht gut!

Wird JSON mit dem richtigen Header ausgeliefert, unter PHP geht der so:

header('Content-type: application/json');

Dann kann man ein feines Feature von Firebug nutzen:
den JSON View, dieser versteckt sich unter der Response als JSON Tab.

Ja schon besser! Aber, ich wiederhole, nur mit dem richtigen Header, mit text/html o.ä. ist dieser Tab nicht zu sehen.

Nun gut, trotzdem ein bißchen eng da alles in der FireBug Hülle.
Ich mach ja ganz gerne den Ajax Call in einem neuen Tab auf, um zu sehen ob alles drin ist.
Dann empfiehlt sich ein Firefox AddOn: JSONView

Dies rendered das JSON schön im Firefox, wenn , Ihr habts erraten, der Header stimmt: application/json !

So ist gut!

Check das aus. Dieses kleine, aber feine Addon erlaubt es, alle Stylesheets via Kontextmenu-Auswahl oder F9-Taste zu aktualisieren. Der Clou dabei: Das ganze geschieht on-the-fly, ohne dass ein Page-Reload nötig wäre. Jeder leidgeplagte RIA-Entwickler wird angesichts der offensichtlichen Macht dieses Addons in Ehrfurcht erstarren. Denn dadurch lässt sich der Zeitaufwand fürs CSS-Styling um mindestens 90% verringern, und dann macht diese Tätigkeit sogar wieder sowas wie Spaß.

Jeder, der mal mit Dojo, Firebug und der XmlHttpRequest-Konsole hantiert hat, wird sich sicher nur unter Schmerzen an die ewigen Ladezeiten zurückerinnern können. Mit diesem Mini-Addon spart man sich  das andauernde Warten wenigstens beim Skinnen.

Einige Wermutstropfen gibt es allerdings: Mittels @import-Direktive eingebundene CSStylesheets werden nicht aktualisiert, Mac-User haben einen gewissen Eingewöhnungsaufwand, während der PC-Jünger einfach nur die F9 mit der F5-Taste tauschen muss ;). Und ihr Javaentwickler werdet weiterhin starke Nerven beim ewigen Deployment beweisen müssen. Aber dafür werdet ihr ja schließlich auch absolut überbezahlt ;)

Tschüss! Ahso, hiernochmalderlink: https://addons.mozilla.org/en-US/firefox/addon/46211/

eine weitere Supererweiterung für Firebug ist meiner Meinung nach FirePHP.

Das Tool ermöglicht PHP (debug)Ausgaben direkt an die Firebug Konsole zu schicken:

FB::log('Log message');

FB::info('Info message');

FB::warn('Warn message');

FB::error('Error message');

installieren lässt sich das Ding beqeum via pear:

pear channel-discover pear.firephp.org
pear install firephp/FirePHPCore

einbinden dann so:

// object oriented API
require_once('FirePHPCore/FirePHP.class.php');
$firephp = FirePHP::getInstance(true);
$firephp-> *

require_once('FirePHPCore/fb.php');
FB:: *

dann solche Dinge tun:

$firephp->setEnabled(false);  // or FB::

$firephp->log('Plain Message');     // or FB::
$firephp->info('Info Message');     // or FB::
$firephp->warn('Warn Message');     // or FB::
$firephp->error('Error Message');   // or FB::

auch sehr schön. Logging in Tabellenform:

$table   = array();
$table[] = array('Col 1 Heading','Col 2 Heading');
$table[] = array('Row 1 Col 1','Row 1 Col 2');
$table[] = array('Row 2 Col 1','Row 2 Col 2');
$table[] = array('Row 3 Col 1','Row 3 Col 2');

$firephp->table('Table Label', $table);  // or FB::

fb($table, 'Table Label', FirePHP::TABLE);

oder auch Tracing:

Traces
You can send a backtrace showing File, Line, Class, Method and Function information including Arguments to clearly show the execution path up to the point in your code where you triggered the trace.

$firephp->trace('Trace Label');  // or FB::

fb('Trace Label', FirePHP::TRACE);

uswusw.

uuund:
Es gibt auch ein Symfony Plugin dafür.

FireUnit ist eine Extension für eine Extension. Für Firebug nämlich.
Damit lassen sich dann ziemlich komfortabel Javascript Unit Tests machen.

Der Funktionsumfang ist überschaubar, was mir das Ding auf Anhieb sympathisch macht.

true / false Tests und String compare:

if ( typeof fireunit === "object" ) {
// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );

// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
"The lazy fox jumped over the log.",
"The lazy brown fox jumped the log.",
"Are these two strings the same?"
);

}

Regex String Compare:

if ( typeof fireunit === "object" ) {

// Compare a string using a regular expression
fireunit.reCompare(
"The .* fox jumped the log.",
"The lazy brown fox jumped the log.",
"Compare a string using a RegExp."
);

}

und die Ergebnisse in der Firebug Konsole anzeigen:

if ( typeof fireunit === "object" ) {

// Display the total results
fireunit.testDone();

}

… was dann so aussieht:

nice.