CoffeeConsole: A Chrome Extension

Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.

The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.

I've put together a quick video to demonstrate this.

Behind the scenes, I cobbled together a bunch of resources. Namely, the Ace editor and the CoffeeScript compiler There really wasn't a lot of code that I needed to add except to figure out how to run the compiled JavaScript in the proper context.

There's definitely more features that can (and maybe should) be added such as the ability to review the compiled JavaScript and the ability to view the compilation errors. The project has been added to GitHub, so feel free to contribute. (As of writing this, I still need to choose a license but likely an MIT license.)

Download the extension or check out the repo on Github.

Published April 06, 2012
Categorized as Browsers
Short URL: http://snook.ca/s/1016

Conversation

15 Comments · RSS feed
neojp said on April 06, 2012

This is incredibly awesome, thanks Jonathan. I'm using it already!

Rob Colburn said on April 06, 2012

Nice feat! I really love all the features they're building into DevTools.

I am curious thpugh, why you wanted to build extension based rather than web-page (like jsfiddle). Or, did you want a debugger in your native tongue?

Jonathan Snook said on April 07, 2012

@Rob Colburn: Running CoffeeScript in the browser wasn't the hurdle as you can do that on the main site. The desire was to be able to interact with the current page via CoffeeScript. I've seen a bookmarklet that could do the trick but when my co-worker asked for dev tools integration, I wanted to see what was possible.

Alec Perkins said on April 07, 2012

Awesome! This is going right next to JSON View on my must-have extensions list for development. Some sort of persistence or history would be nice, but it's already proving itself useful this morning.

Full disclosure: I'm responsible for the CoffeeTable bookmarklet. I went down the route I did, with an in-the-page widget, because I was trying to scratch itches I had with developing for IE and mobile. Those constraints have been informing the features and direction of the widget. I do almost all my actual development in Chrome though — as do most I know of — so it's great to have a full extension. (Especially one with a proper text editor!)

@Rob Colburn Another tool I'm working on is Pad Hacker, a JSFiddle-like page that combines Haml, Sass, and CoffeeScript into its output (all compiled live in the browser).

Larz Conwell said on April 07, 2012

This is amazing! I always hated going to the site to try something out. It would be cool if you could also see the compiled JS beside the console. Also why is this not in the store?! haha

Jonathan Snook said on April 07, 2012

@Larz: I plan to add it to the store but I was a little impatient. :) I'm going to work on it some more today and hopefully have the compiled view and error reporting available, too. After that, I'll see about getting it into the store.

Glad you like it!

Larz Conwell said on April 07, 2012

Awesome, I can't wait!

h2rd said on April 07, 2012

thanks, i'm starting learn coffeescript and this extension very helpful me

Babar O'Cap said on April 10, 2012

FYI, with Firefox you can use Acebug extension https://addons.mozilla.org/en-US/firefox/addon/acebug
which is similar to CoffeeConsole.

Deny Prasetyo said on April 10, 2012

Just In time :D
I just think to migrate my JavaScript code to CoffeeScript for my Rails app and i am chrome user :D.

Thank A lot.

Magesh said on April 13, 2012

This is awesome!! Thanks a lot!!

Leo said on May 10, 2012

This extension seems really cool, going to have to check it out now! Thanks for letting us know about it!

Andrew said on July 12, 2012

Thanks for making this, just what I was looking for!

Flo said on November 25, 2012

I guess it's not possible to add this to Chrome anymore unless someone submits it to the chrome web store? Please prove me wrong :3

Jonathan Snook said on November 25, 2012

@Flo: while I haven't updated it in awhile, it should still be in the Chrome web store.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.