Debugging Sass in Chrome on OSX

Question

I'm on OSX, and I'd like to be able to debug Sass-generated CSS in Chrome (or Canary) developer tools using the new source maps feature. I'm using Sass and Compass.

I've followed the instructions to get Sass producting the source map file. For the benefit of anybody else who's struggling with this, the steps are:

• Install the pre-release version of Sass with sudo gem install sass --pre
• Check your Compass version - you need 12.2, not the 13 alpha. If you need to uninstall it you can do it with sudo gem uninstall compass --version 0.13.alpha.2.
• Add this to your config.rb file sass_options = {:sourcemap => true}.
• Go to the folder that contains your config.rb and run sass --compass --sourcemap --watch scss:css (this tells Sass to compile files in the scss folder to CSS files in the css folder).

If everything's worked properly, when you make a change in one of our scss files (say styles.scss), Sass will compile a new CSS file - at the same time it'll create a file called styles.css.map which contains the mapping info that should allow Chrome to point you to the source SCSS file when you select an element in Developer Tools.

I've successfully got my Sass producing this file. But unfortunately Chrome refuses to do anything with it. I've done what seem to be the recommended steps:

• Install Chrome Canary
• Go to chrome://flags and enable the setting "Enable Developer Tools experiments"
• Open Web Developer Tools (Function-12), click the cog in the bottom right of the window and on the General tab tick "Enable source maps" and on the Experiments tab tick "Support for Sass".
• Restart Canary

But when I inspect an element in Developer Tools I just get the same old reference to the crappy CSS file. I want to see where the element's styles originate in the SCSS file. Has anyone had any luck with this on Chrome OSX, or even with FireSass?

Answer 1

To those having problems with the current pre-release version of SASS and compass: you are not alone and there is a workaround!

The current pre-release version is not compatible with compass. You need to be able to run the command 'compass' without an error, and whilst you have alpha version 162 installed, you get the LoadError.

Instead, install version 141 with the following command:

gem install sass -v 3.3.0.alpha.141 --pre

Note: you need the current stable version of compass, not the pre-release. The pre-release version of compass doesn't seem to work with build 162 or 141. Also, you should install compass before the pre-release version of sass, since compass will also install the currently released version of sass.

Hope that helps!

Answer 2

Source maps do actually work in OSX Chrome! I have several stylesheets in my dev environment, and I was stupidly inspecting styles that belonged to a stylesheet that didn't have a .css.map file yet. If you follow the steps above this should work for you, probably even with a current version of Chrome.