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 
711
352
Hafiz Mukhlisur Rahman's profile photoSimon Owen's profile photoAdam Brewer's profile photojean claude Ferrando's profile photo
135 comments
 
Ooh, this looks to be pretty sweet...
 
We're almost there to Chrome being my IDE of choice. Don't get me wrong, this new feature is what I've always wanted! However, it only allows the editing of sources that the browser can see, ie. html, css, and js files. This works great for Chrome Apps because that's all they are! But, when you have an app that lives on a server where the page is created server side with python or PHP, in this case you can't see/edit any of those sources. What I'd like to see next as a future feature for this is to be able to create a project like in Eclipse where we can see all the source. Perhaps add git support too so we can then pull and push all our work to github from a ChromeBook? That's the holy grail of web dev to me...
 
that's why closed code OS is so great.. no1 knows whats wrong with it XD
 
integration with version control last thing to expect to fullfill my complete IDE experience
 
my chrome crash too much with the new update help google
 
Adding folders through GUI is cumbersome. Would be nice to be able to do it through CLI.
 




i can not connect with you from some reasons.
 
Noted and checked, very slick
 
Does this work with Dart and Dartium?
 
Can't wait to try this. I love how my workflow is increasingly shrinking down to just two apps - Chrome and SublimeText 2. This addition will be awesome for debugging.
 
quando vão se tocar em traduzir para o idioma de cada paìs,fica a dica!
Translate
 
my programmer friend was quite interested by this. thanks, I got major brownie points  lol!!
 
Galaxy s three! What can I do on this thing

 
So which Chrome version will be the first to have its own built-in text editor (or IDE)? It looks a lot like it's going in that direction... especially since it would make developing on Chrome OS a lot easier.
 
Running Chrome on my laptop everything was too small, set the zoom level and now several things remain not just small but tiny, like when I click notifications.  Thinking of going back to FF.
 
I dont see any option “File system folders in Sources Panel” is it the same as "FileSystem inspection"
 
Chrome loads pretty slowly for me. Feel like switching back to INTERNET EXPLORER. I must be mad.
 
Chrome 调试工具越来越好用啦!
Translate
 
Great! I just noticed 'Mapping' section in the Workspace tab. There are two fields: 'File mapping url' and 'File mapping path'. I guess it's some kind of a feature to keep remote and local files in sync. Or what's that?
 
Is it already available on Canary OSX version or not yet? I've downloaded Canary 26.0.1390.0 and there is no “File system folders in Sources Panel” option. Is it just an upcoming feature? 

FYI: While I try to load this post on G+, Canary is crashing. :(
 
Finaly i can create my email a/c
 
Current dev tools are good for minor editing of source files. I don't see  myself using Chrome as my Editor anytime soon. Using a text edito has countless advantages for a polyglot programmer.
 
Just to remind folks: this is an experimental feature and you will need to have DevTools experiments enabled in chrome://flags in order for the option to show up in Settings. 
 
+Addy Osmani Oh thanks. It works now and I've run into the same issue like Greg. :) Let me ask an off-topic question. Is there a way or will be there a way to change the color scheme of the editor? I prefer dark color schemes to spare my eyes.
 
How to use mappings? I want to interpose local files over remote files, in order to be able to debug an online page I cannot edit.. I copy/past link addresses as they appear in "Sources" tab in both : "File mapping url" (the remote file url) and "File mapping path" (the modified local version) fields, but after page reloads, the online versions of the files are always choosen.. (I am using Chromium build 178192 on Linux, not a Canary Build)
 
quand  vous prendrez la peine de " communiquer " dans la langue de vos clients........vous leur RENDREZ  SERVICE .j c ferrando
Translate
 
+1 to an example on how to use mapping since on most servers the URL pattern is usually different than the directory structure. Thank you for this feature. It would make a world of different in dev. cycles.
 
+Alvin Crespo It may be because the directory added contains a large number of files/a binary file was opened in the editor. Does re-installing Canary help?
 
Great work +matteo conta! That will hopefully help anyone having challenges with the steps to get it enabled.
Translate
 
For anyone wondering about file mapping and that part of the workspaces UI: this is currently implemented and should work however we haven't mentioned how to use it in this post. We'll follow up with a proper walkthrough once Workspaces are more stable.
 
+Addy Osmani Could this also solve the problem of requiring the flag --allow-file-access-from-files for developing locally?
 
+Ricardo Cabello That's a very good question - I believe so. I'll confirm with the team and get back to you!
 
+Addy Osmani on Windows 8 when I click on the link "Add file system" I receive this error in the console window of developer tools : The selected folder should contain an empty file with the following name: ".allow-devtools-edit".
But... windows doesn't allow me to create a file with name starting with a dot .....  what can I do? 
 
Solved: on windows you need to open a command prompt in the folder you need to add and type "echo  > .allow-devtools-edit"

After this operation you can add the folder without errors, thanks google :)
 
Nice, sass and emmet support with this would be sweet? :)
 
I didn't find the “File system folders in Sources Panel” in my browser
 
Try to follow my documentation, it's in the latest comments to this post
 
Awesome! As long as people are making feature requests, I would love to see the Chrome Dev Tools support Sublime and TextMate bundles. Thanks guys
 
Awesome! {আমরা আরও মডার্ন ব্রাউজার পাবো নিশ্চয়ই...}
Translate
 
it would also be cool to get built-in DVD burner, is there any flag for it in Canary)?
 
"Wouldn't it be useful if you could instead just edit the source for your web apps directly in the DevTools?" It would if DevTools supported my Vim plugins ;)
 
Some suggestions:

- Please show the file names in the shortest form, without the full path, show the full path only in the parent folder.

- Add a "filter" input text, so I can include/exclude only certain type of files, i.e. I don't need to see .gif or .jpg files
 
+Md Badiuzzaman First enable developer tools experiments via chrome://flags and then enable the experiment in the Experiments tab that appears via the Settings cog (bottom corner).
 
One step closer! Keep up the good work, dudes.
 
Man, Chromebook is THIIIIIIIS close to becoming a legit development machine for web folks.
 
Why not attach a bash terminal to Chrome so that all development environments can hook in? Perhaps a local manifest of source files.

It gets complicated. For front end devs, this type of stuff is fantastic. I think the perspective at Google is that back end developers don't need a browser to test their code. Browsers run HTML, CSS, and JS - those testing in a browser are likely writing HTML (or a preprocessed version thereof), CSS (or a preprocessed version thereof), and JS (or a preprocessed version thereof) - I imagine there will be native support for Angular/front-end templates coming soon (considering the whole in-house "this is how HTML would have been written" argument). I imagine Coffescript, haml, Markdown, etc could all be optional developer extensions to the dev env. Doubt that anything will land to let you edit your erb templates though.
 
Great!  Now, however, I've 2 different versions of e.g. layout.css; the one referenced in the HTML page as well as the one I've added from the folder on disk.  Shouldn't they be unified, or have I not installed it correctly?
 
This seems to have broken my "hot-swap" - now when I save, the local file is saved, but the running code is no longer hot-swapped. Am I missin' a trick?
 
+Addy Osmani a really useful feature would 'ignore patterns' - as including all my git data is definitely slowing things down in the source panel.
 
+Sean Murray Chrome is buggy everywhere for some definition of buggy. That said, I use Canary, the very nightly Chrome for years, and have had no major problem on OS X.
 
+Remy Sharp I'll pass that on and see if there are plans to address this in the pipeline.
 
+Addy Osmani I just checked, it's reading 130,000 files - which I totally appreciate is silly, but it makes opening the source and scrolling quite sluggish. Ignoring .git files and node_modules (for my setup) yields 30,000 files - which form what you said - is much more manageable
.
 
I had to back off the canary. Too many performance issues last year. I'll wait downstream, looks like a great feature ! Reloading a single file would also be amazing. Like one CSS or one js, just refetch from the same URL and rerender as needed. Great for those of using compass watch etc. 
 
Could i someday in the future replace the internal editor by sublime? 
 
or embed a Chrome browser in Sublime or a Terminal or VIM/Emacs buffer.
 
When I edit the local file I don't see the changes reflected on the page (they only apply when I reload the page).
Isn't the goal of this to make your in-browser tweaks apply permanently?  Thereby removing the tedious step of transferring tweaks between the DevTools and your editor (as seems to be described in the intro)?
It seems that now I still need to transfer tweaks between two versions of the same file in the DevTools (which is actually more cumbersome than transferring them from the DevTools to my external editor of choice).

My ideal version of all of this is that you enable a writable directory on disk for a given website/webpage.  Then DevTools figures out the mapping between the css & js files etc. referenced by the website to the content on disk.  Normally this would be a 1:1 file correspondence (layout.css referenced & layout.css on disk), but the file could also be named differently (layout-version-1234.css => layout.css) or (advanced) could be spread out amongst multiple files (all.css => layout.css + typography.css + modernizer.css).
This approach would also negate the need to ignore certain patterns of file as mentioned by +Remy Sharp, as you'd only be editing files that are actually (directly or indirectly) referenced on the webpage.
 
Amazing! Definitely never regretted the day I switched from debugging with Firebug :)

If no-one's mentioned it yet, it works great with quick edits to LESS/SASS files while having something like CodeKit running to compile changes on the fly and live-reload the page.
 
+matteo conta Thank you for adding this note (about using "echo > .allow-devtools-edit"). Windows' file name restrictions can sometimes be annoying. And the error message certainly isn't helpful. :)
 
+Jeff Evans I'm happy to help the web community.. and this error was so unbelievable .. I thought for a moment that the name of the file was a joke to windows developers :-)
 
+Eoghan Murray yea, i agree, this is ass backwards. They gotta be kidding me. They missed the point completely. Why edit in chrome if you cant see the changes on the page immediately? I use Tincr for this currently. I was hoping to make the switch to Chrome's offering, which ultimately has the power to be the long term solution. 

After you've added a whole directory, you can right click the files in the sources panel and make specific mappings, but it doesn't work. Like Tincr you should be able to provide a configuration file that regex style maps files to urls and allows you to see your changes in the browser as you make them. What's taking so long for this? It's almost May. They should just nail this easy stuff by now. This is so major. It's so pointless that they have all these dev tools to edit in chrome without this feature. It makes zero sense. 
 
hmm so this is pretty cool. i have a wamp server on my computer and i go to my local site and then i set up the directory for the workspace. then i can go and edit the file and once i refresh the changes show up, but there has to be a way i can cut out the refresh part right?

someone mentioned having to transfer files between editors or something, i dont seem to need to do that. once i set up the local files under workspaces (not mapping cant get that to work), i was able to edit files and have the changes applied once i refresh the page. but i think thats just because im using the local dev server

so my only issue right now is having to refresh the page for my changes to show up. it would be fine if, any time i save a file, it reloaded the current page. would be even better if it somehow knew what i changed and updated only that part of the page
 
I tried to test it on ubuntu 13.04 (using google chrome from dev channel version Version 27.0.1453.81 beta, but couldn't find the 'File System' options in chrome flags.

Any idea when will we be able to give it a try on linux???
 
+JOEY LENNEVILLE Not exactly. I've just mentioned before that it would be nice to never need to leave Chrome. If the console were able to be used with CLI tools, and Sources were a text editor, preferably if it were capable of somehow integrating your editor of choice to be the editor in Sources, that's what I'm talking about. Use Chrome to develop, test, debug, commit, build and deploy all in one place. It's not a perfect world though.
 
I've tested it and I enjoy it, but still has a couple of quirks... 1) It doesn't seem to save directly from the css styles editor (don't know why, but it should) and 2) should allow to save by FTP workspace (would be a killer feature!!!)
 
Forget my previous comment about point 1. It does save directly from the css styles editor (have to correctly map the sources). Still missing something like FTP upload, though. 
 
I don't know if FTP upload is within scope. I mapped it to a local server so all of the changes were reflected. I suppose it might be useful to have it upload via  FTP, but seems like it would add too much complexity.
 
You are absolutely right, it is an extra layer of complexity. But when you are working on live systems with some complexity, you may no longer have the chance of maintaining a duplicate of the system, and you end up working with it directly online. Also, if you have a website running a cms on a shared host, the only access you got is ftp, which ends up being the same. An ftp connector could solve it, although I understand it's may well be out of scope.
Who knows, maybe a simple extension could solve the problem. In any case, I couldn't live without DevTools, and love these last features.
 
I just feel like, if you want to "do things right", you're better off setting up a dev server and using Git or something to push your changes to the live server. It doesn't seem like you should ever be working directly on a "live" site, because there is just so much that can go terribly wrong. Of course I'm guilty of doing exactly this, but that's my understanding of why Google might not want to implement a FTP client into their browser. Plus, then they're in the business of FTP clients, which is just so much extra trouble to deal with.

But honestly, I haven't really used the new features much. My workflow has stayed pretty much the same, where I keep chrome open, use the regular developer tools, ST2, and sometimes DW.
 
+Bruno Mateus You can use an FTP client with a folder monitoring feature, such as CuteFTP. Then you can still edit your files from Chrome and push the changes to your production server automatically.
 
+Remy Sharp +Addy Osmani I concur on the idea of an ignore pattern, it would be nice to incorporate this ignore pattern in the "Search across all sources" as well, and, perhaps choose which folders to ignore while searching (or ignore the work space all together).
 
kkkkkkk i am very hope to use this program  i am Somali boy i am in Mogadishu  
Add a comment...