CODEWITHSUNDEEP
node.jslessgoogle-chrome-devtools
JMWalker
JMWalker

Reputation: 95

Debug LESS with Chrome Developer Tools

My directory structure is as follows:

    css/style.css
        style.css.map
    less/style.less

index.html

I have created a simple index.html file as follows:

<head>
<link type="text/css" rel="stylesheet" media="all" href="css/style.css">
</head>
<body>
<div id='box'></div>
</body>

The style.less as follows:

@bgcolor: green;

#box {
width: 200px;
height:200px;
background: @bgcolor;
}

Inside the css folder is the style.css file compiled from style.less to style.css and style.css.map using the command below on node.js command prompt:

lessc less/style.less > css/style.css --source-map=css/style.css.map --source-map-basepath=css

Then I installed less middleware:

 npm install less-middleware

I'm trying to figure out why I cannot debug less directly on Chrome since I have already Enable CSS source maps on Chrome Dev Tools.

Thanks.

Upvotes: 1

Views: 1020

Answers (1)

JMWalker
JMWalker

Reputation: 95

The chrome developer tools will not reflect .less files if the source map url at the end of the .css file is not valid

/*# sourceMappingURL=css/style.css.map */

instead should be 

/*# sourceMappingURL=style.css.map */

assuming the style.css.map is in the same directory as the style.css file.

Also, confirming that the url in the .css.map file is valid is also a factor to take care of!

{"version":3,"sources":["../less/style.less"],"names":[],"mappings":"AAAA;EAIA,gBAAA;;AAJA,GAKA;EACA,UAAA;EACA,eAAA;;AAPA,GASA;EACA,YAAA;EACA,eAAA;;AAXA,GAaA;EACA,WAAA;EACA,eAAA;;AAIA;EAKA,mBAAA;;AALA,GAOA;EACA,aAAA;EACA,eAAA;;AATA,GAWA;EACA,aAAA;EACA,eAAA","file":"..\\undefined"}

Hope someone will find this helpful.

Upvotes: 1

Related Questions