使用 Chrome 开发者工具调试 LESS答案

【问题标题】：Debug LESS with Chrome Developer Tools使用 Chrome 开发者工具调试 LESS
【发布时间】：2015-02-10 20:36:55
【问题描述】：

我的目录结构如下：

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

index.html

我创建了一个简单的 index.html 文件如下：

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

style.less 如下：

@bgcolor: green;

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

css 文件夹内是 style.css 文件，在 node.js 命令提示符下使用以下命令从 style.less 编译为 style.css 和 style.css.map：

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

然后我少装了中间件：

 npm install less-middleware

我试图弄清楚为什么我不能直接在 Chrome 上进行调试，因为我已经在 Chrome 开发工具上启用了 CSS 源映射。

谢谢。

【问题讨论】：

标签： node.js less google-chrome-devtools

【解决方案1】：

如果 .css 文件末尾的源映射 url 无效，chrome 开发者工具将不会反映 .less 文件

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

应该是

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

假设 style.css.map 与 style.css 文件位于同一目录中。

另外，确认 .css.map 文件中的 url 是否有效也是一个需要注意的因素！

{"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"}

希望有人会觉得这很有帮助。

【讨论】：