How to make Chrome understand the Sass/SCSS in your rails app

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”:

General Setting

Next, select the the Experiments tab and check “Support for Sass”:

Experiments Settings Page

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).

Before and AfterIf you run into any problems or have ideas for how this support could be improved further, please leave a comment below.

to see future front-end development tips and tricks.

This entry was posted in Chrome, CSS, Rails, Tools. Bookmark the permalink.

43 Responses to How to make Chrome understand the Sass/SCSS in your rails app

  1. This is quite helpful. Thanks for the quick tip!

  2. Just a quick note that the ‘Experiments’ tab under the developer console will not show up unless you specifically enable it under chrome://flags (Enable Developer Tools experiments)

  3. I believe you can use rake assets:clean to remove the precompiled assets…

  4. Support for full property/value/selector mapping has now landed in Chrome. This is about 10x more powerful than the line number mapping that’s in there now.

    You’ll want to be exporting the full sass source map for this. See http://snugug.com/musings/debugging-sass-source-maps for more details (2nd half of the post)

  5. JC says:

    Is there a trick to making the “Experiments” tab show up in Inspector Settings?

  6. If using CodeKit to compile SASS, you can also select ‘Full debug info’ in the output preferences (for file or globally) in the ‘Debug Info in CSS’ section.

    • Niek says:

      This only works if you change the preferences for the file, global changes don’t affect files you’re already working on it seems.

  7. Thanks for this, didn’t know about the Chrome support! To enable the same in Compass, put this in config.rb:

    sass_options = {:debug_info => true}

  8. Pingback: Line Number Mapping for Sass in Chrom Dev Tools | CSS MINE

  9. Scott Munn says:

    For those of you using LiveReload, here’s how you can use it:

    1. Go to your “monitored folder,” make sure “Compile SASS…” is checked and click “Options.”
    2. Check “Emit debug info for FireSass” and make sure “Compact output style” is selected, otherwise it doesn’t work.

  10. Ben Demeyere says:

    Great! Could someone help how to do the last part (configure your sass compiler to output debug info when compiling) with codekit?

  11. where do you add this code “config.assets.debug = true …” when using hammer to compile sass?

  12. Pingback: Debugging SASS in Chrome | Daniel Koskinen

  13. Ricardo Zea says:

    Another awesome tool in my Web Design arsenal, thanks!

    To map your Firefox to your Sass/SCSS from your CSS file(s), follow these steps:

    1. Install Firebug for Firefox: https://addons.mozilla.org/en-us/firefox/addon/firebug/?src=search
    2. Install FireSass for Firebug: https://addons.mozilla.org/en-us/firefox/addon/firesass-for-firebug/
    3. On your CMD (Command) you need to type the following flag: “–debug-info”. For example: “sass –watch scss:css –compass –debug-info” — No quotes of course
    4. Open Firebug (F12) and inspect an element, you’ll see on the Style panel on the right the map of that element on your Sass/SCSS file.

    Your CSS file gets ‘injected’ with bunch of extra code*, this extra code is what FireSass (and now Google Chrome) sees, it helps FireSass and Chrome “map” your Sass/SCSS file(s) from your CSS file(s).

    *The extra code makes your CSS files quite larger than it needs to be, so make sure you remove the “–debug-info” flag and recompile your final CSS file without it.

    Good luck.

    • rzea says:

      Correction: You have to use 2 dashes instead of one in Step 3: “––”

      Seems this post system interprets double dashes as em dashes.

  14. tddewey says:

    Thanks much. Just getting into SASS, and this is extremely helpful.

  15. Pingback: Responsive Design Weekly #50

  16. Ethan Lai says:

    It really is a very useful function.
    If you are windows user or linux user, you can try koala http://koala-app.com/, it support “–debug-info” option too. Hope to help people.

  17. Pingback: Article Roundup for 04.4.13 - Tvenge Design

  18. did someone get it running with the asset pipeline?

    we using the @import syntax in the application.css.sass file and not all the time this tree . stuff

    thanks for help

    • lee says:

      Hi Marv,
      Make sure you have ‘sass-rails’ in your Gemfile (not just ‘sass’), then the @import stuff should just work: sass-rails hooks into @import to integrate it into sprockets’ tree stuff.

      Best,
      Lee.

  19. I’m running on the latest Rails 3.2, and Sass 3.2.7. After making the above configuration changes I can see the debug info being spilled into my `application.css` file, but the Web Inspector doesn’t show any SCSS files – just the css.

    FWIW: I’m running Chrome 27.0.1453.47 beta.

    • Mike Suam says:

      Hi,

      I’ve run into the same problem. Debug info is present in my css file but web instpector still shows me the filenumbers of the css files instead the ones from the scss sources.

      Have you found a solution yet?

      I’m running Chrome 27.0.1453.116m

    • mcabrams1 says:

      I’m seeing this as well, even with a symlink to the folders (I’m using vagrant so I thought that Chrome might be using paths that didn’t exist). I’m starting to wonder whether the SASS (not .scss) syntax is not supported…

  20. denbuzze says:

    A small word of caution: Setting config.sass.debug_info to ‘true’ has taken our build from 5-6 seconds to 25+ seconds. So don’t do this when you’re constantly changing the files.

  21. Alex Kwiatkowski says:

    It seems like chrome 27 has broken this. Just auto-upgraded yesterday and like @stevenharman the web inspector no longer shows .scss files.

    FWIW we are running chrome stable 27.0.1453.93

  22. Pingback: Seeing Sass/SCSS rules in Chrome Inspector – Matt Walters

  23. vhyza says:

    Because Chrome supports source maps v3 proposal only, I wrote blog post (and gem), how to debug SASS in Rails 4: http://blog.vhyza.eu/blog/2013/09/22/debugging-rails-4-coffeescript-and-sass-source-files-in-google-chrome/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s