Sass/SCSS support in Chromer Developer Tools

I had the same problem on Chrome Canary and I fixed it in the following way:

First I enabled the support for source maps: Web Inspector -> settings -> General tab -> check “Enable source maps”.

Then I installed Sass 3.3 (which supports source maps) using the instructions found here http://snugug.com/musings/debugging-sass-source-maps:

run

gem install sass --pre

check with

sass -v

to have at least Sass 3.3.0.alpha.101then use the --sourcemap flag instead of the --debug-info/-g one when you compile your files.

In case anyone else ends up here, to use source maps in Chrome for Sass, you need to use the --sourcemap flag to generate them first!

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

The --debug-info flag is for FireSass.

Your Chrome might have an update error. I you click the menu in the top right, and click About Google Chrome, you'll see your version (should be 31+). Mine showed an old version and an update error.

Uninstall Chrome, restart the computer, install chrome again.

You should have all the latest tools. SASS support was no longer experimental on my version, and turned on by default for me. But you might have to turn it on:

• Go the URL chrome://flags then Enable Developer Tools experiments.
• Open DevTools (Right click a web page Inspect Element)
• Click the cog icon in the bottom right
• Click Experiments, and click Enable SASS Support
• Click General, and click Enable CSS source maps