Log() or Debug() function

[Soviut]

As LESS frameworks become more common, it gets harder and harder to determine if complex calculations are being evaluated as expected.

I propose a debugging function that prints to either the node console during compilation or the browser console if being run in the browser. Something simple like the console.log() we're all familiar with. If log() is too close to Math.log() then perhaps debug() is less ambiguous.

Ideally, multiple values could be output at once and the line number the function was called on would be very useful.

[Soviut]

So I'm tempted to start working on this as I know the functions are separated into a convenient functions.js file, however, I'm wondering what sort of behaviour I should use.

I think the debug() function should act as a pass through. Whatever value is passed in will be returned, allowing it be used inline with an attribute:

div {
    width: debug(5px + 2px);
}

This would print something like DEBUG Line 2: 7px to the web console in the browser or to STDOUT during compilation. Printing what column the debug happened on might also be useful for cases where multiple debug statements are nested within each other, for example:

div {
    width: debug(5px + debug(10px - 5px));
}

Some additional work may be necessary for dealing with colours; Specifically how they should be displayed (hex, rgba, both, etc.)

Any thoughts on this?

[Soviut]

I was able to get a simple pass through function working but ran into issues with the function not having access to debugInfo in order to get its line number. Additionally, the function is limited by only being able to be used in an expression.

As such, I have decided to try introducing an @trace directive that can allow variables and expressions to be debugged.

 @value: 10px;

@trace @value;

@trace (@value + 5px);

a {
    @color: blue;
    @trace @color;
}

[seven-phases-max]

Btw., if you have debug function that works in expressions, trace can simply be defined as a mixin:

.trace(@values...) {@unused_: debug(@values)}

or even:

.trace(@values...) when (debug(@values)) {}

Though I'm not sure if it fits if you need to log specific statement line.

[matthew-dean]

@seven-phases-max It might work if you altered the trace do pass in a line number, which you would know from the editor.

I'm not sure of the value of this natively. It really has nothing to do with style pre-processing. I think the responsibility lies with Less editing platforms to provide you with debugging tools.

[matthew-dean]

This is dependent on the root functions PR, but this should be trivial to do as a plugin once that work is completed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ivanbrykov]

What's the status here?