Sunday, October 12, 2008

Firebug Console for power users == REPL

There have been many, many posts through out the internet explaining why Firebug is the greatest thing ever for the web developer from the CSS editor to the AJAX transmission viewer to the javascript debugger. I'm going to throw one more thing in; javascript REPL.


REPL stands for Read, Evaluate, Print, Loop for those that don't know and basically means it's an interactive shell into your program. Most of us know about the console in Firebug but how many know about the power it gives? When you open Firebug the console tab is selected by default. You may know this as the place those console.log() messages go. At the bottom is a blank line denoted by ">>>", this is the interactive part. You can execute a line of javascript here. If you click the circle with the up arrow on the right you open the multiline console. I recommend this as the way to go. You can write multiple lines, such as functions, and execute with ctrl-enter or command-enter.


Anyway, back to that REPL. The console lets you interact with any loaded javascript on the page. You can change global variables, call functions, pretty much anything javascripty. This is where the power comes in. You can define functions meaning you can redefine functions! And it'll work when some element or function on the page calls it.


Imagine for a moment that your trying to create a new function or debug a function on your production server where you have to interact with the real data. You can't just change the code, check it in, build and deploy each time due to various issues like time and the client noticing the site going up and down. What you can do, and what I had to do recently, is open the console, paste in the fixes to the definition of the function, evaluate it, and then go about interacting with the page. It becomes a much faster solution that has a couple of benefits.

  1. No redeploy until you know it works
  2. Don't have to worry about anyone else getting in there and using your code while you're testing it out
  3. Interaction with the real problem, with the real data causing it.


If you go about writing your javascript code with the console in mind there are some great uses for it.

  • Have your logging statements controlled by a global variable. On the page it's false and not printing. When you need to see what's going on in Production or some other uncontrolled by you environment, just change that variable to true and you get your logging.
  • Fire functions and events while developing so you don't have to keep reloading the page and waiting for template recompiles. I like to use this when writing something with AJAX calls while working on the backend. I create a refresh() method ,that is the initial loader on the page anyway, and call it from the console.
  • Last, but not least, a personal favorite, testing out javascript expressions. We all have been there where you can't remember exactly how substring() works and you'd just like to try on the page instead of googling it and then interpreting what you find to fit your scenario. I use this all the time for things like figuring out a complex Prototype.js expression on the page to see how it works and tweet it before putting it on the page for real and going through the refresh cycle. In fact I'd go as far to say it'd be very, very hard to do without and I'm starting to wish for one in Java (aside from things like groovysh and jirb)

I hope this opens up some options and makes life easier for you developers out there. At least when working in Firefox. Firebug does have the downside of making you feel that much more helpless when you have some stupid IE bug.

3 comments:

Anonymous said...

Thank, YEW!! I've been poking around for other REPLs, while I had Firebug right in front of me!

Robert said...

I'm not sure I fully follow this. When I type a function definition into the console, I see something that looks like an odd kind of closure, and not the function I wanted. For example, when I examine a trivial function definition that I typed at the console, I see this:

with (_FirebugCommandLine) {

popup = function (obj) {$("workflowTagMenu").showPopup(obj, -1, -1, "context");};

}


This doesn't look like a tasty function definition and, indeed, it behaves oddly when I try to invoke it interactively....

prodrive555 said...

With the most up to date stuff you'll just see the function as you wrote it. That seems like it's showing you the firebug code.
Can you run your function anyway? To see your function as you wrote it you have to call toString() on it.