Coffeescript in Firebug Console with Acebug

Firebug is an indispensable tool when it comes to web development. Whether it is checking the Ajax requests/responses (under Net, inspecting DOM elements (under HTML), or using jQuery and Underscore.js inside the console to play with DOM elements, it’s an awesome tool. There is one aspect of it that I wish Firebug console provided: Coffeescript integration, but then I found Acebug.

Installing Acebug is just like any other Firefox add-on. Before we keep going, let’s check out Acebug configuration.

First, go to the Firefox’s Add-ons window. If you are on a Mac, just press Command+Shift+A.

The configurations that interest me the most are:

  • Ability to use spaces instead of tabs and being able to specify the tab size
  • Ability to configure code editor theme!! I currently use Vibrant Ink.
  • Ability to configure Key binding!! I could not believe I could use Vim inside Firebug!

Now that we have configured Acebug to our heart’s content, let’s check out what Acebug gives us.


When you invoke Firebug, to see Coffeescript in action, follow these steps:

Step 1

Step 2

Now, this is what you should see:

Step 3

Press Shift+Enter on the console, then you will see a “prompt.”

Step 4

Type ‘lang=cf’ as shown below:

Step 5

Now it’s time to enjoy some Coffeescript! Type some Coffeescript, and click Run. Voila!



Acebug also adds “Resource” to Firebug. Let’s check it out:

As you can see, Acebug allows you to search for resources on the current page by file name (in this case, I searched for jQuery). It also shows the resource source code or image file on the right hand side! What’s really neat is the syntax-highlighting.

In all, I’m glad I came across this tool. I think Mike Ratcliffe and nik4name did an awesome job. Kudos to them!