Sass source map support on chrome isn't working

Question

Before start, I double check on StackExchange and I didn't find any other site that will fit this question. If I missed, excuses.

I followed this guide, to enable chrome that support with source maps sass, but I can't make it work.

The funny part is that I followed another guide, to enable support for Firefox, and is working.

The part that both have in common is setting up the config.sass.debug_info = true in rails.

So, I think that the problem isn't on rails but in chrome, but I'm not sure.

This is my setup:

• rails 3.2.8
• Ubuntu
• Chrome 27.0.1453.110

update - It seems like the problem is with Chrome 27.x series. If that is the case, this question turns to be a waiting for fix from chrome developers. So I'll investigate a bit more, if I can confirm, I'll close this question. Thanks for your time.

update - So it seems to be true, this is an issue of google chrome, thanks to all for your help

Answer 1

The problem is that Chrome developer tools recently changed what version of source maps it supports. The article you mention details how to set up an older style of CSS source maps. However, Chrome now supports version 3 source maps. The new source maps puts the mapping in a separate *.css.map file instead of inline in the compiled CSS file. The benefits of the new format is that it is much smaller and does not break styles for older Internet Explorers. The link that @justin-smith provided should point you in the right direction. However, from my findings, even though the pre-released version 3.3 of the SASS gem knows how to generate the .map files, there still needs to be support from the sass-rails gem to correctly serve these files from the Rails asset pipeline. I created a repo in order to figure out the current state of support for v3 sass source maps in Rails. There may be a way to short circuit the asset pipeline and have the sass gem precompile files and put them in a directory which comes early in the asset path. However, I have not figured out how to to this.

Answer 2

Try following the tutorial in this link. I just set this up this morning and it's working fine for me.

This will let you inspect an element and then find what the corresponding SCSS declaration is.