Bookmark and Share

Wednesday, January 23, 2013

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 :
    image
  3. Enable the “Developer Tools Experiments
    image
  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:
    image
  7. Click on “Experiments” –> “File system folders in source panel”
    image
  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:
    image
  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

    image

    image

    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:
    image
  13. Type CTRL + S  if you change the file and you need to save it

 

Hope it helps! Good Experiments!