Snook.ca

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.)

@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.

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: 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.

@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.

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?