Collins, Michael G.

Here’s another good 404 error page that makes me laugh.  This one is part of the newly-redesigned getfirebug.com site, and features the all new Firebug logo.  You can probably find it by typing in any old garbage after the slash, but this link seems to work well: getfirebug.com/asdf

I’m happy to say that I’ve finally released the first alpha version of Crossfire, a Firebug extension I’ve been working on over the last half of this year.  Crossfire aims to allow any number of external tools to connect to Firebug remotely and access the information and abilities of Firebug via a simple JSON-based protocol.   The Crossfire API and protocol reference are available on the Firebug wiki, it’s worth glancing over if you plan on trying out the examples for yourself.

This first release should be considered a developer’s preview.  Crossfire, by itself, won’t do a whole lot for you.  In this post I’ll show you how to connect to the reference server implementation, a console-based python script.  It’s a good way to play around with the extension and get familiar with the protocol, but the real benefit will come when support for Crossfire is integrated right into your other development tools.

The first thing you are going to need is a recent version of Firefox, 3.5 or 3.6 ( in beta at the time of this writing, but seems to work).  You’re also going to want the latest from the Firebug 1.5 branch, currently 1.5X.0b5.  You’ll also want a fairly recent version of python to run the server, 2.6 or greater should work.

You may want to consider installing Firebug in a new profile along with Crossfire, especially if you rely on Firebug on a daily basis.

Once you’ve got all that, you’re ready to install Crossfire . ( http://getfirebug.com/releases/crossfire/0.1/Crossfire-0.1a2.xpi )

You should see another bug icon in Firefox’s status bar, next to Firebug.  

That’s Crossfire.

Now we’ll need something to connect Crossfire to.  The python test server is in Crossfire’s SVN on google code, here, or from the command-line:
svn co http://fbug.googlecode.com/svn/crossfire/test

Then, start the server with:
python crossfire_server.py localhost 5000

Now tell Crossfire to connect to your server by clicking on the crossfire bug icon in the status bar, and clicking "Connect…".

This will open a dialog box where you can enter the host and port for Crossfire to connect to.  It defaults to ‘localhost’ and port 5000, which is what I’ve been using in my examples.  Just make sure you put the same values here that you used on the command-line to start the server.  You should also make sure you enable Firebug now, as well as the Script and Console panels, if they were disabled.

When you hit OK, Crossfire will attempt to connect immediately.  If the connection is successful, you will see that the Crossfire bug icon now has a pair of crosshairs over it, indicating that it has connected.

If you go back to the terminal where you started the server, you should also see that it has connected, and has automatically issued the ‘version’ and ‘listcontext’ commands.  Congratulations! You’re now remote-debugging with Firebug and Crossfire!

Now we can have some fun.  The python reference server also has an interactive command line, which you can use to send commands to Firebug.  The first command you will want to know is entercontext, which takes a single argument that is the context ID.

Firebug keeps track of each Web page it sees and the information related to it in something called a "context".  Most Crossfire commands are specific to a single context, which is generally synonymous with a single Web page.  So, you’ll need to tell the Crossfire server which page you are interested in before you start sending commands at it.

I usually just copy and paste the ID from the "crossfire_id" field of the crossfire response.  If you forgot the context ID, you can use the listcontexts command to list them again. entercontext isn’t strictly part of the Crossfire protocol, it’s a convenience so that you don’t have to keep typing the context ID as an argument to all the other commands.

Once you’ve entered a context, you can start issuing commands that are context-specific.   The scripts command will give you a list of scripts that Firebug knows about on that page, and the scopes command, if Firebug is not stopped at a breakpoint, will return the global scope (window object) for that page.

If a command requires arguments, they need to be specified as JSON objects that the Crossfire protocol expects, since they are passed through directly.  So, if you wanted to evaluate a Javascript expression using Firebug from the Crossfire server console, you would enter something like:

Crossfire x> evaluate { "expression": "Math.PI*2" }

A more complete reference of the Crossfire protocol is available on the Firebug wiki, here, or you can consult the api documentation.

One more example: setting a breakpoint from Crossfire.

And the result:

After a long hiatus, the Firebug blog has returned to blog.getfirebug.com.  If you use Firebug this is a great place to learn about tips, tricks, and hidden features that you may not have known about, like the group() and groupEnd() console commands (for example).  And if you’re a web developer and you don’t use Firebug, then "what the hell?!", go try it already.  I’m not just blogging about it because I’m mentioned over there, it really is a great resource for web developers, so check it out.