We're hiring!

We're actively seeking designers and developers for our all three of our locations.

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.

Coffeescript

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!

 

Resource

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!

Sivabudh Umpudh (10 Posts)

This entry was posted in Web Apps and tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

2 Trackbacks

  1. [...] Griffiths Coffeescript in Firebug console with Acebug Lots of people complain about Firebug being sluggish, but lots of other people keep hacking cool [...]

  2. [...] CoffeeScript in a Browser context. It is using ACE, the web code editor integrated into Cloud9. – http://spin.atomicobject.com/201…- https://addons.mozilla.org/en-US…For real debugging, Mozilla, Google and Webkit, are working on [...]