Menu
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.
469
Now you can edit your SCSS in the browser and when you save, Chrome will write those changes to the actual file. If you are watching your Sass for changes, the SCSS will get compiled and the CSS will be auto refreshed in your page including your changes.
Unfortunately, the features of SCSS have yet to be introduced in the CSS specs and, therefore, are not supported by browsers. To run SCSS code in a web browser, you must first convert it to CSS.
Browsers do not understand Sass, in order for browsers to understand the Sass code we write, we have to convert it into regular CSS code. We do this by running Sass compiler which converts our Sass code to into regular CSS code.
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.
129
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
