使用Less在Chrome直接调试

1.鼠标右键,Add folder to workspace.添加需要调试的项目

2.选中项目中的index.html,右键map to networkresource,添加映射

3.此时编辑调试面板中sources下的xxx.css即可实时调试

4.对于Less文件,可以用命令行去调试,但建议添加在koala中,这样在完成上述步骤后,也可在面板实时编辑调试xxx.less文件。

5.在Elements面板中,也可以通过选中元素后编辑调试

6.通过运行命令(在    /项目名/css    路径下)lessc --source-map xx.less xx.css,可以使Elements面板中元素映射的styles信息由xxx.css改为xxx.less.但是这儿有个bug,在Elements面板中编辑的样式信息,Sources面板下的xxx.less文件不会同步更新。

推荐阅读更多精彩内容