nex3 / firesass

FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.

FireSass

FireSass is a Firebug extension that makes Firebug display the Sass filenames and line numbers of Sass-generated CSS styles rather than those of the generated CSS.

Usage

First, install FireSass. Second, enable Sass's :debug_info option. If you're using Sass with a Ruby web framework, depending on the version, you probably want to do:

config.sass.debug_info = true

for Rails 3.2, or for earlier versions of Rails

Sass::Plugin.options[:debug_info] = true

Add this to config/environment.rb in Rails, or config.ru in other Ruby frameworks.

If you're using Compass, instead do:

sass_options = {:debug_info => true}

Add this to config/compass.rb, or wherever else your Compass configuration file is.

If you're using Sass from the command line, just pass in the --debug-info flag. Finally, delete all the existing CSS files so that they'll be regenerated.

Compatibility

FireSass requires Sass 3.0 or later.

FireSass should work with all versions of Firefox after and including 3.0, and all FireBug versions 1.4 and 1.5. It might work with FireBug 1.6 (which is in development at time of writing), but that's not guaranteed.

FireSass currently requires the development version of Sass, available from GitHub.

firesass's Issues

Where to put the Sass::Plugin.options[:debug_info] = true ?

Hi!

You write
"If you're using Sass with a Ruby web framework, you probably want to do: Sass::Plugin.options[:debug_info] = true"

But where do I put this line of configuration?

And btw, which version is "the development"-version? Is haml-3.0.1 fine? Otherwise: How do I install the dev-version?

Thanks, the plugin is a great idea!

Tobias

Any plans to support Webkit browsers?

Would be nice to have sass linenumber displayed in webkit css inspector.

Firebug error log and console.log no longer work with FireSass enabled.

When I have FireSass enabled, I lose any errors that would normally show up in the Firebug console as well as any messages that would come from console.log calls. This only happens when FireSass is enabled. As soon as I disable FireSass, all of those messages display as normal.

If there are errors, I will see the error counter on the Firebug icon increment, but no errors will show up in the console (even with every option selected to display).

Another funny quirk of this issue is that it only happens if the tab has focus when it is loaded. If I do the following, I can get those messages to display after page load (and - I'm assuming - after FireSass does its magic):

1. Enable Firebug on my development tab.
2. Focus on another tab.
3. Right-click on my firebug-enabled, backgrounded, development tab and click Reload Tab.
4. Wait for the tab to finish reloading.
5. Focus back on my development tab.

Then, I get normal errors and console.log messages that might happen after page load. However, there's still no way to see errors or console.log messages on page load.

Version info:
OS: Ubuntu 12.10 64-bit
Firefox: 18.0.2
Firebug: 1.11.1
FireSass: 0.0.12

Performance slow

When I enable FireSass I notice my browser really starts to crawl. When I disable FireSass then the browser responds as expected.

Great plugin! Just wanted to point out there's some performance issues, especially on a lower Dual-Core i5 CPU & <4GB RAM machine.

FF4 Support

Any idea when this plugin will be FF4-compatible? (I CAN'T LIVE WITHOUT IT!!!)

Not working with Firefox 14 & Firebug 1.10

I'm not seeing a single sign that FireSass is doing anything. I'm seeing normal Firebug CSS debugging. My SASS files are being compiled in debug/verbose mode.

debugging info doesn't show in firebug 1.9

I've been using firesass happily with firebug 1.8.

I just installed firebug 1.9, and I'm not seeing the output that I'd expect from firesass.

I reinstalled firesass and restarted firefox, in case I'd broken something. But I'm still not seeing sass debug lines.

Wrong line numbers

Hi!

I'm using FireSass 0.0.9, SASS 3.2.1 and Compass 0.13.alpha.0.

FireSass reports wrong line numbers. They are roughly twice bigger than they should be.

For instance, i've got some SASS declarations on lines 21-23:

h1, h2, h3, h4, h5, h6
  font-family : $font-serif
  color       : $color-headers-main

Firebug reports those to be on line 41:

_headers.sass (line 41)

But there are only 23 lines in _headers.sass!

Why does this happen? How do i fix it?

My config.rb:

# Require any additional compass plugins here.
require 'aurora'

# Compass configuration.
css_dir           = "stylesheets"
sass_dir          = "sass"
images_dir        = "images"
javascripts_dir   = "javascripts"
relative_assets   = true
preferred_syntax  = :sass

# Compiled CSS would be formatted for development.
# No need to make it compact because CMS will do code compression.
output_style      = :expanded #or :nested or :compact or :compressed
line_comments     = true
sass_options      = {:debug_info => true}

Clickable line numbers & editable values suddenly gone

This is definately a bug in FireSass, as disabling the extension does away with it (but also throws away sass integration of course).

So all of the sudden line numbers are gone. They're just not there anymore. I didn't do any sort of update between now and when it still worked (which was like this morning) and the only thing that changed is that I switched from Notepad++ to Brackets. Nothing else has changed. I'm baffled, to be perfectly honest... I mean, if it worked a moment ago, it oughta work now, right? I don't see ANY reason why it wouldn't.

Worse though, css values are no longer editable. Pressing up/down on numeric values does nothing, and a new value types is simply discarded when hitting enter.

I have absolutely no idea why this is happening. At the very least I need to know the exact circumstances under which scss line numbers & editability can be enabled, so I can work out where it went south.

Everything is up-to-date, but to be sure:
Windows 7 x64
Firefox 27
Firebug 1.12.6
FireSass 0.0.12

Firesass fails with Firebug 1.8

It installs without any complaint but it wont show the sass line numbers on the inspector.

Am i missing anything?

Where is compass.rb under Windows 8?

I've looked under the Compass docs for a clue on where to find this file and I'm having no luck.

Where is config.rb on my disk so I can get this working? Thanks!

remove firebug dependency

Firefox have now it's own developer tool.

FireSASS should be works with it.

`load_missing_constant': uninitialized constant Sass (NameError)

I am using the latest versions of SASS, HAML, Compass, Susy and Firesass.

I've added the following to config/environment.rb in my Rails 2.x app:

 <snip>
 Rails::Initializer.run do |config|
 <snip>
 config.gem "haml"
 config.gem "sass"
 Sass::Plugin.options[:debug_info] = true
 <snip>

When I try to start the server at localhost, I get the following error:

  /Library/Ruby/Gems/1.8/gems/activesupport-2.3.5/lib/active_support/dependencies.rb:443:in `load_missing_constant': uninitialized constant Sass (NameError)

Clickable "line number" link to .scss source file?

First of all, thank you so much for this project! It's amazing.

This might be an FAQ, but is it possible to have the clickable "line number" link actually navigate or load the source .scss file? It navigates to the compiled .css style definition.

It's more of a convenience... Otherwise I'm switching back and forth into my text editor to hunt down the original file and line number.

(In the example below, I'm clicking '_grid.scss' and it's going to navigate to the compiled app.css with the css definition).

Thank you again for the great plugin!
Jared

FF 29.0.1 update hurts Firesass

I thoroughly enjoy using this debugging tool, however with the new Firefox update it's kind of killed its main features.

1. number lines are completely gone including name of style sheet
2. inherited styles are not showing up below for the element you've selected using firebug's inspect element

I noticed it's been a while since this add-on has had support but I figured, why not.

Thank you for helping me debug in Sass for the last couple years. It's definitely helped. Hope to see this get some more love.

Firesass development plans for FF4 and Firebug 1.7

Currently the Firesass plugin is not working with an Alpha version of Firebug 1.7 and I totally understand that it's unreasonable to expect you to have your extension working with Alpha software.

I was writing to see when you were planning on development for compatibility with the new Firebug.

Many thanks for the plugin it is a major help.

Josh

FireSass future

So what's going to happen? The last commit was more than a year ago, and as it stands, FireSass simply doesn't work anymore since Firefox and Firebug haven gotten more than a couple of updates.

If this project is truly stalled, then I propose this plugin be removed from the Extension repository for Firefox, or set it to a maximum supported version of, say, Firefox 27. Folks will keep installing this broken plugin if this doesn't happen. And it would be a shame to have this plugin "rot" away - better to border its parameters now that it's still relatively possible.

That, or someone might feel inclined to take over or fork this project and fix the things that need fixing and add to or replace the Extension at Mozilla's repo.

Workaround install firesass

Other source map / Sass plugins don't work for a legacy project I'm working on because I lack the necessary requirements.

I got this extension working again by using the github extension installer add on, which will let me complete my project.