A debug mode for compiled output

[pleonasm]

I'm working with a team of engineers and a fairly large website. We are just getting into using lessphp (and it's awesome!) but are sometimes running into some issues when we debug the CSS within a browser with tools like firebug or webkit's developer tools. Since those tools only see the final compiled output after lessphp's compilation, it's not always obvious where the original source file is for that particular output line.

What would be awesome is to be able to run lessphp in a 'debug mode' where each line of CSS that is outputted added a comment to the end of it that would tell where that line's "source file and line" are. For an example, lets say your project includes the following:

main.less
layout.less
colors.less

Where main.less simply includes layout and colors. The outputted css in debug mode would maybe look something like this:

body {
    width: 760px; /* layout.less; line 1 */
    background-color: black; /* colors.less; line 1 */
}

There are obviously going to be some areas that you can't specify exactly, but exact isn't the goal with this. The goal is to point a developer in a complex project in the right direction to find the right .less file to fix an issue.

[leafo]

Right now line numbers aren't kept after the document is parsed. If this was changed then it wouldn't be too difficult to append where the rules were first declared in the original less document.

Keeping the line numbers would also let us have better compile time errors, which currently don't have line numbers unlike parse time errors.

[raptor235]

What about if you could specify a css attribute that doesn't affect anything... so for development you could enable it and for each phpless css block there would be an automatic "virtual" attribute that shows the line number...

[mindplay-dk]

As a developer, I want our CSS guys to move from SCSS to LESS for various (mainly technical) reasons - but because debugging SCSS is so convenient (with browser add-ons for Firefox and Chrome) it's hard to sell them on that idea.

The smart move, in my opinion, would be to simply replicate the way SASS embeds debug information:

@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/workspace\/blah\/stylesheets\/_layout\.scss}line{font-family:\0000319}}
header {
  margin-top: 10px; }

SASS simply adds a proprietary (but safe) @media rule before every generated rule, embedding the filename and line-number as font-family properties. It doesn't look pretty, and it's a bit dirty/hacky, but it gets the job done.

You would have instant compatibility with current SASS debuggers for Firefox and Chrome, which would be sweet.

[siergiej]

It would be awsome to have sass-style source maps, like @mindplay-dk proposed. It would ease debuging in chrome dev tools:
http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/

[hailwood]

Agreed for mapping to the sass style; that way we don't have to keep up with the changes in the dev tools; they would be automatically supported!

[gerbenvandijk]

Is there progress on this? :)

[philipjohn]

Looking for some sort of debug mode myself, but rather than adding comments all over the shop, would it be more useful to have the compiled CSS just not minified/uglified and have a comment indicating the start of each .less file compiled. E.g.;

/** lessphp: file: base.less **/
.html {
    ...
}
...
/** lessphp: file: nav.less **/
.nav {
    ...
}