How to enable Workspace Experiment on Chrome Canary

Today Addy Osmani has announced a new great feature in google Chrome Canary : the Developer Tools Workspaces.

Workspaces allow you to select custom directories in your file system which are always available for you to edit within the Sources panel.

Here are the instructions on how to enable it:

1. Download Chrome Canary https://www.google.com/intl/it/chrome/browser/canary.html
2. Type chrome://flags/ in the url :
   
3. Enable the “Developer Tools Experiments”
   
4. Close and re-execute chrome canary
5. Open Developer Tools (F12) or type CTRL + SHIFT + I
6. Click on the little settings icon in the bottom right corner of the dev tools:
   
7. Click on “Experiments” –> “File system folders in source panel”
   
8. Close Dev Tools and reopen it
9. Click on the settings icon (like point 6)
10. You will see a new tab on the settings column:
    
11. UPDATE: you need to add a special empty file to the folders that you want to add in the workspace: open a command prompt , change the directory and type :
    
    echo  > .allow-devtools-edit
    
    
    
    
    
    You need to use command prompt because file explorer raises an error when you try to create a file starting with a “.” (dot)
    
12. After this operation the “Add file system” link will work and you will see on the left panel in the dev tools the list of your local files:
    
13. Type CTRL + S  if you change the file and you need to save it

 

Hope it helps! Good Experiments!