Sass source map support on chrome isn't working

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.

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.

I just had problem getting SASS source maps getting to work on my host.... I had completely no idea what could be the solution because the map-file was generated, the sourceMappingURL-tag was present and everything was fine, Chrome was configured and I even used the canary-version..... but then I got it: I used a development Webserver with a self signed SSL-certificate which I need to test my authentication etc.. When I switched to plain HTTP without encryption my sourcemaps got working instantly.