Use Chrome as Your JavaScript IDE

Notice: Undefined property: stdClass::$non_show_categories in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 49

Notice: Undefined property: stdClass::$non_show_archive in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 50

Notice: Undefined property: stdClass::$aga_c234x60 in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 29

Notice: Undefined property: stdClass::$aga_c728x90 in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 31

Notice: Undefined property: stdClass::$aga_c120x600 in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 32

Notice: Undefined property: stdClass::$aga_c160x600 in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 33

Notice: Undefined property: stdClass::$aga_c120x240 in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 34

Notice: Undefined variable: content_end in /home/jamessug/public_html/wp-content/plugins/awesome-google-adsense/awesome-google-adsense.php on line 163

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: