Use Chrome as Your JavaScript IDE

Earlier this week I attended FOWD, a fantastic conference for web designers and developers in the heart of London.  One of the highlights of the trip was the JavaScript Web Warrior workshop with Addy Osmani. He mentioned  that using Chrome Experiments you could edit your JavaScript right there in Chrome, without needing to bother with any other editors. Here’s how to enable that feature:

  • Download Chrome Canary. Standard Chrome doesn’t have this feature yet, so it’s time to live on the edge. Of course, Canary can be installed alongside Chrome without any issues, so it’s cool. 
  • From Canary, navigate to chrome://flags and enable the Developer Tool Experiments
    Screen Shot 2013-05-17 at 09.54.43
  • Restart Canary and then navigate to the site, hosted locally, that you want to work with.
  • Open up Chrome Dev Tools, and click on the settings cog. From here, navigate to the Workspace section.
    This is where you can set up the mappings from URL to file system. Screen Shot 2013-05-18 at 09.05.36

Obviously you will need to give Chrome access to your filesystem.


And that’s it – you’re good to go.

In the following video, Addy gives a run down on how to use this workspaces feature:

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>