I followed the instructions provided by Gogle to setup sourcemaps:
The sourcemaps are working, and I can see the .scss source link in the "Elements tab".
But I have two issues:
1 - When I edit the CSS properties in the "Elements tab" the link to .scss breaks up and DevTools shows link to the compiled .css file.
2 - When I ctrl-click on the CSS property in the "Elements" tab, the "Sources" tab opens successfully to show the corresponding .scss file. When I change the file inside the DevTools and try to save it - DevTools says that the file is saved, but it doesn't actually get saved on disk (seems like it gets saved somwhere else). So the sass watch doesn't update the .css because the .scss file doesn't actually get saved on disk.
I am using:
-Chrome 33.0.1750.154 m
Found the answer in the article: https://medium.com/what-i-learned-building/b4daab987fb0
To be able to edit source files in Chrome DevTools one needs to:
Ctrl+click on any css property to open the served source. In the Sources tree right-click on the file and choose "Map to network resource".
Chrome seems to automatically map all other resources in the folder. Now you can live-edit source files from DevTools.
If you want Chrome to automatically update website when changing source files, don't forget to enable the "Auto-reload generated CSS" in General tab.