These days, it is kind of popular to generate static assets such as
CSS by using some preprocessors. For example instead of writing pure
TypeScript… Instead of
CSS, you can use
This article shows how to debug
Sass in Google Chrome using
Various preprocessors have various advantages. Such as hiding language’s awkwards, adding missing features, shorter source codes etc.
Un/fortunately web browsers don’t understand this languages. So they have to be compiled into languages supported by web browser, in this case namely
This step brings one fairly big disadvantage - worse debugging. For example when error occures, browser can display affected line, but in compiled language. You don’t have something like mapping between source code and compiled result which is served to browser. You need to go through your code and try to guess where the problem is. Of course it is not big problem for small code base, but it can be painful with large projects. This problem should be eliminated by
How it works? At the end of compiled file, there is a comment defining location of mapping file.
Snipped from CSS file
/*# sourceMappingURL=/assets/source_maps/application.css.scss.map */
this location have to be accessible by browser, because it contains mapping between source code and generated one. This is how it can look like:
You can read about mapping in Source Maps v3 proposal.
Enabling source maps in Google Chrome
So how to achieve this?
You need to enable
source maps support in Chrome’s inspector.
If you wan’t to debug
Sass you probably need to enable developer tools experiments. To do this, visit URL
chrome://flags/#enable-devtools-experiments in Google Chrome and
Enable Developer Tools experiments. Then restart Google Chrome.
After Google Chrome’s 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.
Then you need to generate and serve
Generating and serving source maps by Rails 4
Preprocessor must support
source maps, specifically v3 proposal, because Chrome has recently dropped v2 support. Fortunately both
CoffeeScript (from v1.6.1) and
Sass (from v3.3.0.alpha.88) now supports
Source Maps v3.
Gem for generating
CoffeeScript source maps is called coffee-rails-source-maps and name for
Sass source maps support is sass-rails-source-maps. Both of them should be used in
development environment only.
To use them, simply put them into
Gemfile development group
group :development do gem 'coffee-rails-source-maps' gem 'sass-rails-source-maps' end
then update your gems (
sass-rails-source-maps depends on
pre version of
sass gem, because it brings supports v3 source maps).
and then make sure,
Rails regenerates assets
$ rm -rf tmp/cache/assets $ rm -rf public/assets
After assets regeneration,
assets/source_maps directory should be created in
When you start webserver and reload web page in Chrome, you should see
coffee files in inspector.