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.
Conversation
This is incredibly awesome, thanks Jonathan. I'm using it already!
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?
@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).
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
@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!
Awesome, I can't wait!
thanks, i'm starting learn coffeescript and this extension very helpful me
FYI, with Firefox you can use Acebug extension https://addons.mozilla.org/en-US/firefox/addon/acebug
which is similar to CoffeeConsole.
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.
This is awesome!! Thanks a lot!!
This extension seems really cool, going to have to check it out now! Thanks for letting us know about it!
Thanks for making this, just what I was looking for!
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
@Flo: while I haven't updated it in awhile, it should still be in the Chrome web store.