Chrome developer tools workspace mappings

Just a correction on what loislo has said. "It works only in canary at the moment."

You can trigger all these experimental features in stable chrome releases by typing Chrome://flags in the address bar.

It works only in canary at the moment.

EDIT: Now in Chrome (since ver 30+)

1) you need to open devtools settings panel. It has 'Workspace' section.

2) in this section you need to click on 'Add folder' item. It will show folder selection dialog.

3) After selecting a folder you will see an info bar about access rights for the folder.

4) As a result you will see two top level elements in the Source panel file selector pane. In my case it were localhost:9080 site and devtools local file system folder. At this moment you need to create a mapping between site files and your local files. You can do that via context menu on a file.

It doesn't matter what file to map, local or site file.

5) at that moment devtools will ask you about restart.

After restart devtools will show you the singe folder entry in the files pane and will apply all the changes you do to the local file each time when you press Ctrl + S or Cmd + S on mac.