Sass (source maps) support in Firefox Developer Tools

Question

With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.

However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.

I'm hoping I'm wrong and it is currently supported.

Answer 1

With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/

You have to right-click in the Rules section and activate Show original sources option:

Now CSS rule links will show the location in the original file, and clicking these links will take you to the source in the Style Editor.

From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!

Answer 2

The best suitable way to debug Sass in Firefox seems to be FireSass.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/