Sass/SCSS support in Chromer Developer Tools

Question

Previously, until the very recent time (up to Chrome 27, as far as I can tell), Chrome Development Tools, with help from Chrome Experiments, supported Sass (SCSS to be precise) "inspection".

The support manifested in ability to inspect the site's CSS file and if the CSS was compiled from SCSS using --debug-info (SCSS 3.2.7), then in CSS panel:

instead of CSS file link - you'd see the corresponding SCSS file link and you could click it and it would open the file in resources in the exact SCSS rule that contributed to the CSS rule being inspected (much like you can with CSS file).

For whatever reason, this has stopped working with (my) latest Chrome update.

This is important to the work I am doing at the moment (SCSS reorganization of a large project) so I am asking: did anyone experience the same (I have it on all machines I have access to) and, more importantly, does anyone know how to fix it (without hunting down older Chrome versions)?

I wasn't sure what would be the proper SE channel, but since it relates to development - here it is

P.S. The paths SCSS generates seem to be correct, since in FireSASS they are shown and accessed correctly

The same happens on any channel I tried - Release, Beta, Canary

Update 18.06.13

Since it seems that the old (--debug-info) days are gone, I will accept @electric_g answer as the only possibility.

Answer 1

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.101 then use the --sourcemap flag instead of the --debug-info/-g one when you compile your files.