Firefox’s Firebug addon has a feature that isn’t obvious at first glance, but can be very useful. I think it’s particularly helpful when writing jQuery because jQuery can do so much in just a few lines. It’s perfect for testing in Firebug’s command line. When you first start Firebug you’ll see something like this:
If you haven’t enabled the Console, you’ll get a message telling you so. Enable the Console before proceeding. The Console says “Reload to activate window console” because you turned on Firebug after the page rendered. Reload the page to get the Console ready for action.
>>> alert("Hello World");
>>> var x = "Hello World"; >>> alert(x);
But the coolest part is that you can test all your jQuery stuff here. One of the trickiest parts of jQuery can be writing the right selector, targeting just the right element[s] on the page. Firebug’s command line makes it easy, because you can do all your testing without having to go back and forth between your OPAC page and the opacuserjs system preference in the staff client. Get your script just right in the command line, then save it when its finished. Let’s try something really basic:
Firebug even lists the affected elements in the console. Click any of them and you’ll be shown that element in the HTML tab.
What if one line isn’t enough? Click that little red button in the lower right corner of the screen (see the screenshot above) to expand the command line into a “command box.”
var orig = $(“#catalogue_detail_biblio h1”).remove(“span”).html();
var regexp = new RegExp (““, “gi”);
var title = orig.replace(regexp,””);
Copy that script and paste it right into the Firebug command line. Click “Run” and you’ll see the result right away. For testing purposes we don’t really need the “$(document).ready()” part, because we’re executing the script on an already-loaded page. But it seems to work either way.