Making firebug's Style Side Panel aware of less css & Sass debug info #45

Open
wants to merge 4 commits into
from

Conversation

Projects
None yet
3 participants
@jc4rp3nt3r

With the increasing popularity of CSS coding frameworks like less & Sass, the CSS wilderness is a changing. At its simplest level, these frameworks offer bundling of files (many CSS files into 1) to limit HTTP requests for more responsive online applications.

This causes a serious headache for developers when using firebug, as it is reporting the file name and line number in the bundled file (Note: This is accurate from the client side perspective, but it makes development difficult). On the server side however, the actual rule could be in one of many files, and even when the file name is correct, the line line numbers are inaccurate due to the server side importing of the other CSS files.

However, these frameworks provide an option to output a /* CSS Comment */ including the original line number and file name where the rule is declared, removing the confusion.

This pull request simply sniffs for a .less or .sass file and parses the comment if it finds one. Else, it doesn't touch anything. The footprint for this code update is very small and I attempted to use the existing source cache to make this a near zero-impact addition to an already amazing plugin.

I have seen a fair number of requests for this functionality, and someone even put together a Sass plugin but the less side of the world has been without a good solution. I hope this helps both sides.

http://www.lesscss.org/
http://www.dotlesscss.org/
http://sass-lang.com/

@jc4rp3nt3r

This comment has been minimized.

Show comment
Hide comment
@jc4rp3nt3r

jc4rp3nt3r Oct 2, 2012

Just finished a quick refactor to comply with the coding practices:
https://getfirebug.com/wiki/index.php/Firebug_Coding_Style

Just finished a quick refactor to comply with the coding practices:
https://getfirebug.com/wiki/index.php/Firebug_Coding_Style

@janodvarko

This comment has been minimized.

Show comment
Hide comment
@janodvarko

janodvarko Oct 3, 2012

Member

Nice work James!

Related thread:
http://groups.google.com/group/firebug/browse_thread/thread/14300179d9587a89/d6c2fae58346ca1f

  • Could we have an issue report for this feature
  • The initial implementation should be done as Firebug extension
  • We also need a simple test case that can be used for testing (should be part of the issue report)

Honza

Member

janodvarko commented Oct 3, 2012

Nice work James!

Related thread:
http://groups.google.com/group/firebug/browse_thread/thread/14300179d9587a89/d6c2fae58346ca1f

  • Could we have an issue report for this feature
  • The initial implementation should be done as Firebug extension
  • We also need a simple test case that can be used for testing (should be part of the issue report)

Honza

@jc4rp3nt3r

This comment has been minimized.

Show comment
Hide comment
@jc4rp3nt3r

jc4rp3nt3r Oct 5, 2012

For anyone following this pull request.

The issue report is located at:
http://code.google.com/p/fbug/issues/detail?id=5961

The fireless extension is located at:
https://github.com/janodvarko/fireless
with my fork located at:
https://github.com/jc4rp3nt3r/fireless

For anyone following this pull request.

The issue report is located at:
http://code.google.com/p/fbug/issues/detail?id=5961

The fireless extension is located at:
https://github.com/janodvarko/fireless
with my fork located at:
https://github.com/jc4rp3nt3r/fireless

@jc4rp3nt3r

This comment has been minimized.

Show comment
Hide comment
@jc4rp3nt3r

jc4rp3nt3r Oct 7, 2012

The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiled XPI file for ease of install.

So far, this plugin has only been tested against dotLess, the .NET port of the {less} framework.

I hope to do a little research against the ports in other languages to see if what I have so far will work or not. If anyone has a Ruby or PHP version of {less} installed and available with the debug settings turned on, that would help me get this plugin up to speed faster.

The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiled XPI file for ease of install.

So far, this plugin has only been tested against dotLess, the .NET port of the {less} framework.

I hope to do a little research against the ports in other languages to see if what I have so far will work or not. If anyone has a Ruby or PHP version of {less} installed and available with the debug settings turned on, that would help me get this plugin up to speed faster.

@nash-ye

This comment has been minimized.

Show comment
Hide comment
@nash-ye

nash-ye Oct 17, 2014

FireLess doesn't work for me! .. can u test it again ? .. and I am wondering if there is an another solution after 2 years! .. Thanks!

nash-ye commented Oct 17, 2014

FireLess doesn't work for me! .. can u test it again ? .. and I am wondering if there is an another solution after 2 years! .. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment