Building Chromebug August 29th, 2008
This week was a pretty incredible week for web stuff. The Labs people kicked off their Ubiquity prototype, letting the world get a taste for some of what will be possible through natural language processing and the browser. I also discovered a new feed reading add-on for Firefox called Feedly which does some very cool things with Google Reader to present web feeds in a new way. While reeling from all this new-found power, I had an intense meeting with John Barton who walked me through the setup procedure for Chromebug.
First, there are a couple of caveats about Chromebug. It’s still in an experimental state. Some parts work well, like the inspection of a chrome window’s DOM tree and CSS. Other parts are a little flakey or down-right broken. As of right now, the default build instructions will attach you to a 1.3 version of Firebug which has some improvements to handling large script files but is also somewhat broken. It should improve shortly.
So, with that out of the way, I’ll run through a quick Chromebug setup and install. The instructions are on the sourceforge page for Fireclipse, a plugin for Eclipse that adds some debugging capabilities for Firefox and/or JavaScript.
Step 1. From a suitable directory on your computer, check out the chromebug sourcecode from svn. There are external svn references to include two other add-ons, chromelist and firebug. These will get checked out as well.
Step 2. Create a new profile for Firefox using the Profile Manager. I called mine “Chromebug”. Make sure you start Firefox with this new profile to finish the creation process.
Step 2a. Make note of the location of this new profile. You’ll need the full path for the following step. On Windows, this would typically be in “C:\Documents and Settings\%USERNAME%\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.Chromebug\”. Replace %USERNAME% with your username, and xxxxxxxxxx with some randomly generated string. Just look for *.Chromebug in that directory. You will need this for the “install.dir” property in step 4 below.
Step 3. In a console (or terminal window), cd to the chromebug directory you checked out earlier. E.g., cd ~/Projects/fireclipse/extensions/chromebug
Step 4. Create a local.properties file using your favorite text editor in this directory. Add the following properties to it (each property should be on a single line, regardless of how this blog breaks it up):
firebug.dir=../firebug/branches/firebug1.3
chromelist.dir=../chromelist
Step 5. Create links to the chromebug extensions. This can be most-easily accomplished using the build.xml file provided in the fireclipse/extensions/chromebug directory and the Java build utility ant. If you don’t have ant installed, you can do this manually as per the instructions in the included readme file. It’s standard extension development linkage.
And now you should be ready to fire it up using (on windows):
Replace firefox.exe with firefox-bin on unixey OSes. You should see two windows open. One, a smaller window with the title Chromebug, the other, a standard browser window. Before you get too excited and jump in, you should quit the application and restart it (again, using the above command) to make sure the chrome files get registered properly. Now you should be ready to play!
Please keep in mind that Chromebug is experimental. There’s a lot of code in there and not all of it’s working. We are interested in getting more people using it and reporting problems though so check it out, and if you encounter any problems, feel free to come to #firebug in irc.mozilla.org and ask questions. You may have better luck using Firebug 1.2 instead of 1.3 currently, but I haven’t tested that myself. It should be a matter of changing the firebug.dir property in the local.properties file from step 5 above.
I’d like to thank John Barton for patiently walking me through the above and giving me a walkthrough of the code itself. It’s incredibly cool stuff and I’d love to see it become part of the standard arsenal of extension development tools as well as part of the toolkit for developing firefox front end features. In the coming weeks, I’ll post follow-ups on the state of chromebug and what you can do with it.
Happy debugging!
Tags: Build, Chromebug, Code, Firebug, Mozilla
Posted in Chromebug, Code, Firebug, Mozilla | Comments (5)
August 29th, 2008 at 9:35 pm
I can’t believe that you didn’t include a screenshot.
August 29th, 2008 at 10:18 pm
oh geez, you got me.
Updating!
August 30th, 2008 at 2:57 pm
I integrated chromebug in to jsbridge a few weeks back, so if you run $ jsbridge –debug, chromebug and venkman will both get installed in the temporary profile buildout.
I’m not building chromebug tho. I have an external svn reference to the chromebug part of the fireclipse repo, I pull in the install.rdf template and use it to build a new working install.rdf, then I just install chromebug as a regular extension. I’m also installing the latest firebug release version, and not building the newest from trunk.
Should what I’m doing be working? Is this possibly why I’ve never been able to get the console working
Oh, and John said at the Summit that chromelist isn’t required anymore, is that accurate?
August 30th, 2008 at 4:10 pm
nice!
Yeah, I think the title of this blog post is probably not strictly accurate. It should really be “Installing Chromebug Into a Profile From Source Code” or similar. I think what you’re doing should work, sure. I expect your console problems are related to differences in chromebug and in the version of Firebug you’re using. I haven’t tried it with 1.2.0 yet, but there are probably some issues. There are also issues enabling it in 1.3 so … yeah. It’ll work from the Firebug window or panel, but not the Chromebug window. We need to fix that.
It’s true that chromelist isn’t required, and in fact, I believe it’s currently broken. I get a XUL error when I try to open it.
October 23rd, 2008 at 12:54 pm
[...] into the google code repository we’re using for Firebug. Feel free to check it out and give it a whirl. We should be much closer to having Chromebug in a usable state where Firefox and extension [...]