First Look: Workspaces - Simplifying Your Find & Fix Workflow With The Chrome DevTools

Update: Read Chrome DevTools Revolutions for a more recent guide to using Workspaces:
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

The typical web app development workflow involves using some clever window arrangement to display your editor and the DevTools side-by-side, or having to switch back and forth between them. This can sometimes feel cumbersome and time-consuming. Wouldn't it be useful if you could instead just edit the source for your web apps directly in the DevTools?

Just find an error, fix it and save to the file from just one place.

This workflow becomes easier today with Workspaces, an in-progress experimental feature that’s landed in Chrome Canary. Workspaces allow you to select custom directories in your file system which are always available for you to edit within the Sources panel. This can be the directory for an app you're working on or even a whole list of different projects.

Workspaces can greatly simplify your workflow, however they're certainly not for all types of development. For those scenarios when you just want to be able to debug and bug-fix, you may find not having to leave the DevTools a time-saving experience and we hope this is where they will help the most.

To get started with Workspaces in Canary, enable the DevTools experiments in chrome://flags then head over to Settings > Experiments and enable  “File system folders in Sources Panel”. Next, restart the DevTools by closing and re-opening them. You should now see a “Workspaces” tab in Settings.

Under this tab, you will see an “Add file system” link allowing you to add local file systems for editing. Directories you would like to add as a workspace require an “.allow-devtools-edit” file to be present (for now), which you can create via “touch .allow-devtools-edit” at the command-line or using your text editor of choice. When you’ve added a file system, you’ll be able to view and edit files within that directory anytime you’re working in the Sources panel.

No having to leave the DevTools - just find issues, fix them and save. This better enables workflows like the one +Remy Sharp described in his “Never having to leave the DevTools” video http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/.

We hope that Workspaces will open the door to fully developing within the DevTools, without the need to switch to other applications. Stay tuned for more on this in the coming months

Please note that Workspaces are highly experimental and are subject to change.

Written by +Addy Osmani. Reviewed by +Paul Irish 
Photo
Shared publiclyView activity