LESS: mastering the dumpLineNumbers function

I'm relatively new to LESS and I have a question regarding the dumpLineNumbers property within the less JavaScript object. Despite adding it to my html file, I am unable to detect any changes in the browser output or debugging tools. Can someone explain how this property functions?

The source files I am utilizing are as follows:

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 when intentionally introducing an error in my CSS, like omitting a closing brace as shown below:

h1 {color:red; }

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

p { .mixin; }

I still do not observe any impact on the output upon removal of the dumpLineNumbers property.

Your insights would be greatly appreciated.

Answer №1

If you want to use the mediaquery in Less, remember to write it in lowercase. This will work in Less versions up to 1.7.5.

When you compile your CSS, you may see lines like this:

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

In your index.html file, make sure to include the following script:

<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 can add #!dumpLineNumbers:mediaquery to the URL instead.

Remember that you can also do this when compiling server-side using the command below:

lessc --line-numbers=mediaquery index.less 

It's important to use a tool that can interpret the @media -sass-debug-info lines. Fireless for Firefox used to be an option, but it is no longer supported. Chrome Dev Tools or Firebug could be alternatives.

For more information, check out:

Less/Sass debugging in Chrome Dev Tools/Firebug

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow https://i.sstatic.net/wO5br.png To view my code, please visit: Cod ...

Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet: <section class="next-gen"&g ...

Ways to load an alternate view upon redirection and initiate button submission

Currently working with MVC/ASP.NET I'm in a situation where I have two distinct views. One of them is responsible for showing a list of items based on a group ID, while the other page is tasked with displaying a variety of information that is generat ...

Adjusting the value of 'let' based on the outcome

Can you assist me with this issue? I am attempting to assign a value to a let variable based on the following if conditional block. class Main extends React.Component{ render(){ let content = ''; firebase.auth().onAuthStateChanged(func ...

Displaying information from an array using AngularJS

I'm struggling to display data from an array and I could use some help. Here's a snippet from my service.js file: this.fetchData = function() { var myArray = $resource('url', {method: 'get', isArray: true}); myArray ...

Execution priority of Javascript and PHP in various browsers

I implemented a basic JavaScript function to prevent users from using special characters in the login form on my website: $("#login_button").click(function(){ formChecker(); }); function formChecker() { var checkLogin = docum ...

AngularJS table cell binding using a common function

Currently, I am utilizing AngularJS to develop a table using ng-repeat. One of the columns looks like this: <tr ng-repeat="x in A"><td>{{calNoMonth(x)}}</td></tr> Unfortunately, during testing, I noticed that every time I make a c ...

A notification appears when the record is being inserted after clicking the button

Just venturing into the PHP and MYSQL realm, so please excuse any beginner questions. Before I submit data from a form to my SQL table, I'd like to display a confirmation POP UP message asking "Are you sure you want to insert this data?" ...

Webpack dynamically imports files from a folder

In order to streamline my development process, I have a specific structure for organizing React components. Each main component has its own components folder right alongside it. Currently, I find myself manually importing each component from the components ...

Error encountered during file upload - file field :input not found

I'm dealing with some HTML that looks like this: <div id="promocodesUpload"> <div class="qq-uploader"> <div class="qq-upload-drop-area" style="display: none;"> <span>Drop </span> </div> <a class=" ...

What is the best way to integrate passport with the existing bcrypt code in my project?

I've been struggling for hours trying to integrate passport with the existing bcrypt code in my project. I've read documentation, tried different things, and basically tortured myself for almost 15 hours. Can anyone take a look at my project and ...

What is the best way to pass `response` data between routes in Express when setting up PayPal subscriptions?

I'm currently in the process of integrating PayPal subscriptions into my Node.js application using Express. I've come across a challenge when trying to pass the subscription ID obtained from PayPal's /create-subscription route to the /execut ...

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

Differences in behavior of constructors when utilizing ES6 shorthand notation

ES6 introduced a new way to initialize objects with functions and properties using shorthand notation. // ES6 shorthand notation const obj1 = { a(b) { console.log("ES6: obj1"); } }; // ES5 var obj2 = { a: function a(b) { con ...

What is the best way to display or conceal an array object using a toggle switch?

I'm trying to implement a show/hide functionality for descriptions when toggling the switch. Additionally, I want the switch to be initially checked and only show the description of each respective result. However, my current code is displaying all de ...

Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...

Tips for creating a high-quality file upload button in Laravel 5 using Bootstrap 4

I need a file upload input similar to the one showcased in this example <input type="file" id="dp_file_input" name="demo" /> The current file input design is not visually appealing, so I am looking for a solution like the one demonstrated in the ...

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

The functionality of ng-change and ng-click seems to be restricted when using a toggle button with bootstrap

Having trouble with ng-click or ng-change on a toggle button. Utilizing the toggle-bootstrap package in this case. <input checked data-toggle="toggle" data-size="small" type="checkbox" data-on="16x9" data-off="4x3 ...

What is the reasoning behind the decision for the javascript void statement to assess an expression?

When it comes to the javascript void statement, it is designed to evaluate an expression and yield the value of undefined. The concept behind this functionality stems from the fact that the global variable undefined can be altered. However, one might wonde ...