Question

我的目录结构如下：

    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文件夹中是使用node.js命令提示符下面的命令从style.less编译到style.css和style.css.map的style.css文件：

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

然后我安装了较少的中间件：

 npm install less-middleware

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

感谢。

Answer 1

如果.css文件末尾的源地图网址无效，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"}

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

使用Chrome开发者工具进行调试

1 个答案: