Debugging Rails 4 CoffeeScript and Sass source files in Google Chrome

These days, it is kind of popular to generate static assets such as JavaScript and CSS by using some preprocessors. For example instead of writing pure Javascript you can use CoffeeScript, TypeScript… Instead of CSS, you can use Sass, Less, Stylus…

This article shows how to debug CoffeeScript and Sass in Google Chrome using Rails 4.

Preprocessors

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 JavaScript and CSS.

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 source maps.

Source maps

How it works? At the end of compiled file, there is a comment defining location of mapping file.

Snippet from Javascript file

//# sourceMappingURL=/assets/source_maps/app/assets/javascripts/notes.map

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:

{
  "version": 3,
  "file": "",
  "sourceRoot": "",
  "sources": [
    "/assets/source_maps/app/assets/javascripts/notes.coffee"
  ],
  "names": [],
  "mappings": "AAOA;CAAA,KAAA,gCAAA;KAAA;;oSAAA;;CAAA,CAAA,CACE,IADF;CACE,CAAqB,EAArB,CAAA;CAAA....rest is omitted..."
}

You can read about mapping in Source Maps v3 proposal.

Enabling source maps in Google Chrome

So how to achieve this?

screenshot

And this?

screenshot

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.

experimental settings

And finally in General settings check Enable source maps.

general settings

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 source maps.

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

bundle update

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

When you start webserver and reload web page in Chrome, you should see scss and coffee files in inspector.

For more information about gems please take a look on coffee-rails-source-maps and sass-rails-source-maps documentation.

Comments