CODEWITHSUNDEEP
google-chromesassgoogle-chrome-devtools
ZenMaster
ZenMaster

Reputation: 12742

Sass/SCSS support in Chromer Developer Tools

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:

enter image description here

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.

Sass support in experiments

Upvotes: 23

Views: 17281

Answers (3)

Brian Lewis
Brian Lewis

Reputation: 152

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

Upvotes: 1

Jason Lydon
Jason Lydon

Reputation: 7180

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.

Upvotes: 2

electric_g
electric_g

Reputation: 1047

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.

Upvotes: 12

Related Questions