LESS: how to use dumpLineNumbers

Question

This may be a very basic question. I am new to LESS and would like to understand what the dumpLineNumbers property of the less JavaScript object does. I've added it to the html file but cannot see any difference in the browser output or in the browser debugging tools. How does it work?

Here are the source files I'm using:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example Code</title>
    <meta name="description" content="Example Code" />
    <meta name="author" content="John Doe" />
    <link rel="stylesheet/less" type="text/css" href="less/styles.less" />
    <script type="text/javascript">less = { env: 'development', dumpLineNumbers: 'mediaQuery' };</script>
    <script type="text/javascript" src="less-1.6.0.js"></script>
</head>
<body>
    <h1>Less is Cool!</h1>
    <p>Hello World!</p>
</body>
</html>

less/styles.css:

.mixin { 
  color: green;
}

p { .mixin; }

Even if I introduce an error in my CSS, for instance as follows where I removed a closing brace:

h1 {color:red; }

.mixin {    color: green; // closing brace omitted on purpose to cause an error

p { .mixin; }

I still don't see any difference in the output when I remove the dumpLineNumbers property.

Thanks.

This option generates an ancient Sass compatible debug info (encoded as special media query blocks or a CSS comments depending on the option value). This format is no longer widely used and by now is almost deprecated in favour of "sourcemaps" debugging format. In other words, forget about this option - it's going to be removed soon. — seven-phases-max, Oct 12 '14 at 14:48
Thank you for your answer. I would like to learn more about the debug info you mention. Where can I find the Sass compatible debug info? It does not appear in my web browser. Where can I view the "sourcemaps" debugging format. And what is sourcemaps? Thanks. — John Sonderson, Oct 12 '14 at 15:56
Basic search queries in your favorite search engine should do the trick. — seven-phases-max, Oct 12 '14 at 20:16
Thanks, I found the following link helpful, and I can see Chrome has built in support for CSS source maps: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ — John Sonderson, Oct 12 '14 at 20:59
This link is also relevant: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/ — John Sonderson, Oct 13 '14 at 13:53

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Firstly you will have to write mediaquery lowercase, than it will work in Less till at least version 1.7.5.

In the compiled CSS you will find lines such as:

@media -sass-debug-info{filename{font-family:file:///home/t.less}line{font-family:\0000315}

In your index.html you should use:

<script type="text/javascript">
less = {
    env: "development",
dumpLineNumbers: 'mediaquery'
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js" type="text/javascript"></script>

Alternatively you append #!dumpLineNumbers:mediaquery to the URL.

Notice that you can do the same when compiling server side by running the following command:

lessc --line-numbers=mediaquery index.less

Secondly you should find a tool which can read these @media -sass-debug-info lines. For firefox there was fireless, which seems to be a dead end now. Fireless required a patched version of LESS which is not available / supported any more.

Also see:

Less/Sass debugging in Chrome Dev Tools/Firebug

LESS: how to use dumpLineNumbers

1 Answers1