Shared publicly  - 
 
My new post on Workspaces: a feature that will hopefully help improve your development workflow in the Chrome DevTools :)
 
First Look: Workspaces - Simplifying Your Find & Fix Workflow With The Chrome DevTools

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 
78
36
Kevin Lanni's profile photoMohammed Arif's profile photoMichael Risse's profile photoJordan Panagsagan's profile photo
25 comments
 
Awesome feature! And the rate at which the Chrome team is pushing DevTools features out is no less awesome. Exciting times :)
 
More awesomeness from the chrome dev tools team - how did we ever build web sites without this stuff! Great job guys ;)
 
Amazing. Now I'm just waiting for proper JavaScript autocompletion support!! :)
 
thx
this is becoming an full featured web IDE
 
Pretty awesome stuff. Chrome is becoming a monster.
 
Thanks for landing this awesome feature. Is it possible to specify somewhere not to include certain files into workspace, similar to .gitignore approach?
 
Great new feature! But my DevTools are permanently freezing after I've activated the experiment and set up my workspace. Can you tell me how to use the mappings correctly. Maybe this is causing the problem.
 
I'm not seeing the right flag in Version 26.0.1391.0 canary, but I'm really looking forward to the day I can do the complete workflow from Chrome.
 
Nevermind; I'm blind, apparently.  Time to play!
 
Do you need to set up a workspace for the Sass support to be recognized?  I've got the debug info loaded into my compiled CSS, and all the flags set in Experiments, but no scss files are being loaded.
 
Workspaces are separate from Sass support and work independently.
 
It's great, but until DevTools has all of the keyboard shortcuts that Sublime Text 2 has...
 
+Kevin Lanni What else would you like keyboard shortcuts for? :) Let us know. If they're reasonable enough we'll try to get them in there.
 
+Addy Osmani it's not a keyboard shortcut, but I would love to see multiple-cursor/multiple-selection support like in ST2. Other than that:

- ctrl+shift+d to duplicate line/selection
- ctrl+d to highlight current word (subsequent presses continue to highlight the next occurence)
- ctrl+t to transpose adjacent words or multiple text selections
- ctrl+shift+v paste with auto-indent
- ctrl+shift+up/down to move lines up/down
- ctrl+alt+up/down to add a cursor to prev/next line
- ctrl+/ comment line
- ctrl+shift+/ comment selection

I use these heavily on a daily basis.

And if devtools doesn't already have it, ability to jump to functions by name, ctrl+g ctrl+shift+g maybe?
 
+Addy Osmani, where can we go to ask support questions for the Canary Sass support?  I'd really like to see this feature in action, but I can't get it to work, despite working on it for a few hours the other day.
 
Honestly, if devtools got most or all of those shortcuts and snippet support, it would be enough for me to use devtools as my main editor. Color theme on the code would be nice, too. :) (the existing one is pretty difficult to distinguish)
 
+Kevin Lanni I think that's a pretty sensible feature request (the shortcuts proposed). From a workflow perspective alone, they're pretty powerful. I'll speak to the team and find out how feasible it would be to support these. 

Btw, on jump to function: do you mean cmd + shift + o? (that currently lists all functions in a script and allows you to quickly filter to one)
 
+Addy Osmani you're probably right. I thought I remembered there was a short cut for that.
 
Also thanks for hearing my request :)
 
Hi, how can I install this experiment? is there like a guide to get this running? thanks!
Add a comment...