NOTE: This gem is probably not working because it depends on sass version 3.3 and higher. Until sass-rails issue is resolved, you can try sass-rails-5.0.0.beta1 branch.
This gem allows you to see your Rails 4 .scss source files in Google Chrome inspector, which can be useful for debugging.
debug_info option available in stable sass gem is no longer working in Google Chrome, because Chrome now supports Source Map v3 only.
Add this to your application's Gemfile :
group :development do
gem 'sass-rails-source-maps'
endAnd then execute:
$ bundle update sass
to use sass gem with Source Maps v3 support, which is currently pre-release version.
After that, run:
$ rake assets:clobber
to make Rails regenerate assets. After assets regeneration, assets/source_maps containing sass source maps is created in public directory.
To see something like this 
To enable source maps open Chrome inspector go to chrome://flags/#enable-devtools-experiments and Enable Developer Tools experiments. Then restart Google Chrome.
After restart, go to inspector Experiments settings and enable Sass stylesheet debugging.
And finally in General settings check Enable source maps.
Enabling source maps may vary in different Chrome versions. For more info please see Working with CSS Preprocessors; part Using Sass with CSS source maps.
- This gem is Rails 4 compatible only
- If you wan't to see
coffeescriptfiles in Google Chrome inspector you can use coffee-rails-source-maps gem.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request