Source Maps in Chrome

If using a CSS preprocessor like SASS the chrome web inspector shows you file names and line numbers for your compiled CSS and not the original source files. This problem can be overcome by a feature called "source maps".

Make sure you’re running at least Chrome version 24. Until this feature is in the declared stable you need to open chrome://flags and enable “Enable Developer Tools experiments”. Now check "source maps" in the settings, and "Support for Sass" in the experimental settings tab.

To your config.rb add:

sass_options = { :debug_info => true }

Don’t forget to turn off the debug info before deployment to the production environment.

Source maps not limited to CSS but could also help for Javascript compilers like Coffeescript. Unfortunately Coffeescript does not support source maps at this point. You will need to use the alternative Coffeescript compiler CoffeeScriptRedux which is already supporting source maps.