When you open the Chrome web inspector, you can browse to the styles that are being applied to your elements. It’s great.
Unfortunately, if you’re using a framework like LESS or Sass, then by default Chrome will reference the CSS files that those frameworks generate, even if you’ve never seen them before. If you pay attention to these references in the Web Inspector, it can be meaningless at best and outright misleading at worst.
Enter Google Chrome’s native Sass support. This has been available in Canary and Beta channels for a while, but it’s now firmly available in the stable Chrome releases. All you have to do is turn on a few flags and tweak your rails app to make it work. Here’s how.
Enable the right settings in Chrome
First, ensure you have Experiments enabled in Chrome. Open chrome://flags and make sure ‘Enable Developer Tools experiments’ is checked and restart the browser.
Next, enable support for source maps in Chrome. Open the Web Inspector and then open its settings (by clicking the cog in the bottom right). Ensure you’re looking at the General tab, then check “Enable source maps”:
Next, select the the Experiments tab and check “Support for Sass”:
Close the inspector and restart Chrome for good measure.
Finally, configure your sass compiler to output debug info when compiling. You can enable source map support in your rails 3.1+ webapp by editing config/environments/development.rb and ensuring it contains the following lines:
config.assets.debug = true config.sass.debug_info = true config.sass.line_comments = false # source maps don't get output if this is true
Alternatively, if you’re compiling your sass manually, set the :debug_info flag to true and and :line_numbers to false.
You will probably need to delete your generated CSS files to force rails to regenerate the CSS output from your (unchanged) Sass or SCSS files. The cache is typically in Rails.root/tmp/cache or Rails.root/public/assets depending on how you (pre)compile your assets. Remove all of the above with:
RAILS_ENV=development rake assets:clean
Restart your rails server, reload the page in Chrome and inspect the elements: if everything worked you should see references to your .scss or .sass files next to the style blocks in the inspector (see below).
If you run into any problems or have ideas for how this support could be improved further, please leave a comment below.
Follow @LeeMallabone to see future front-end development tips and tricks.
