What are the steps for troubleshooting LESS in Chrome?

It appears that the art of LESS debugging has made significant progress in the last year, and I am curious to know how many people have experience using developer tools in Chrome/Canary for debugging.

My goal is to make sure that when I debug a file, the CSS for the element appears as the LESS file rather than the CSS file. Seeing CSS line numbers is not helpful when I need to find the corresponding line number in the LESS file. While I can achieve this in Firefox with Firebug and Fireless, I am having trouble doing so in Chrome.

I attempted to follow the instructions here, but unfortunately, it does not seem to be working correctly for me even after following the steps carefully.

I am using OSX, have LESS installed via node.js, and am utilizing the ST2 plugin Less2CSS to process the less file upon saving. When I use the command 

lessc --line-numbers=mediaquery style.less style.css
, it functions as expected and adds the debug info to the CSS file. However, when inspecting an element, it only shows the CSS file and not the LESS file.

I have verified that my Chrome preferences are set correctly (Support for SASS and Enable Source Maps).

Any thoughts on how to resolve this issue?

cssdebugginggoogle-chromelesssource-maps

Answer №1

Everything is now functioning perfectly with less.js 1.5b4 and Chrome 30.0.1599.69

Essentially, it's important to ensure that lessc generates a valid source map URL at the end of your CSS file:

/*# sourceMappingURL=/templates/lwks/css/template.css.map */

Also, make sure that the .css.map file is being properly loaded by the browser. If you're still experiencing issues, check if chrome://flags Enable Developer Tools experiments is switched on

For more information, visit: https://github.com/less/less.js/issues/1050

Answer №2

Hey there, it's me, the blogger! I wanted to let you know that I recently revisited my post and made some updates to ensure it is compatible with the latest version of Chrome 26. However, I just tested it in Canary and unfortunately, it no longer seems to be functioning properly. So, while it works fine in Chrome 24-26, it appears to be broken in Canary.

Answer №3

I don't believe the issues you mentioned are connected.

From my understanding, you are compiling your LESS file on the server side and simply trying to retrieve the updated css file instead of the cached one, correct?

Have you attempted to follow this guide on disabling Chrome's cache for website development?

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

What could be the reason for the malfunctioning transition effect in my slider animation?

Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...

javascriptcssvue.jsvuejs3

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

angularcssbootstrap-4

Add styling to a window popup and close it when focus is lost in Ext JS

I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead ...

javascriptcssextjstextboxpopover

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Vertical alignment of content over image is not in sync

I am attempting to center my div container .home-img-text vertically in the middle of its parent div .home-img. Despite trying various methods such as setting .home-img-text to position: absolute, relative, adding padding-top, and several others, I haven&a ...

javascriptjqueryhtmlcssmargin

Do Dreamweaver's design and live view display contrasting elements?

Check out the images below: http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (Design view) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (Live & browser view) In the design view, everything appears as intended and looks great. However, i ...

htmlcss

CSS grid tracks remain fixed in size while other tracks expand

Why won't the grid track cells dynamically shrink when other cells are enlarged in the following code? In this snippet, hovering over any track section causes that cell to grow to 75% of the viewpoint. However, instead of the other sections shrinking ...

htmlcsscss-grid

Is IE8 compatible with HTML5 and CSS3?

My client has requested their website to be developed using HTML5 and CSS3. However, it has come to my attention that IE6 and IE7 do not have full support for HTML5 and CSS3. The client claims that IE8 does support these technologies, but I need more inf ...

htmlcss

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Issue with font selection on WordPress menu settingsI am having trouble getting my

Could someone please take a look at this? I am struggling to figure it out on my own. I am currently working on a website for a client and I have created a responsive menu. Unfortunately, the font style for the menu isn't working even though I have s ...

csswordpress

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

javascripthtmlangularjscss

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

What is the purpose of adding this webkit CSS rule?

Whenever I open Chrome developer tools, I come across something that puzzles me. I always assumed that a CSS property is crossed out when it's overwritten by another class. However, I found myself in this peculiar situation: https://i.sstatic.net/Xm ...

cssgoogle-chrome-devtoolsweb-frontend

Instances of repeated flash messages due to Chrome pre-fetch functionality

Within my Symfony 3.0.6 application, I have implemented a system where specific routes are inaccessible until a user has completed their registration process. In order to enforce this, I utilize an AccessDeniedHandlerInterface which redirects users to a de ...

phpgoogle-chromesymfony

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...

javascripthtmlcssreactjsmaterial-ui

What is the formula to determine the sizes of grandchildren div containers?

Hey everyone, I'm having some trouble with my jQuery code and I can't seem to figure out what's going on. Here's the scenario: I'm creating a few divs (based on entries from MySQL) and I'd like to show you the end result: ...

javascriptjquerycsshtml

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

javascripthtmlcss

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

What could be causing the a element tag to not affect the links? Is the syntax correct?

Why aren't my CSS properties affecting the links in my navigation bar? I want the styling to apply only to the links inside the #nav id, but it doesn't seem to be working. Can anyone help me figure out what the issue might be? CSS CODE: a#nav:l ...

htmlcssnavigation

Dynamic element peeks out from behind parent container

When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis an ...

jqueryhtmlcssanimationsvg