firebug/firebug — pull request #44 by jc4rp3nt3r (2012-10-01 18:46:31+00:00)
Title: Making firebug's Style Side Panel aware of less css debug info (applicable to Sass too with minor tweak)

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 file and parses the comment if it finds one. Else, it doesn't touch anything. The footprint for this is very small (21 lines of code) and I attempted to use the existing source cache to make this a near zero-impact addition to an already amazing plugin.

The work done here could also be expanded to work for the Sass comment style too with just a few lines of code.

http://www.lesscss.org/
http://www.dotlesscss.org/