看完本文后在Chrome中调试LESS时所带来的便利有
- 不用在页面中调用less.js
- 页面调用less时rel用普通的css写法即可
<link rel="stylesheet" href="style.less">
,不用写成<link rel="stylesheet<strong>/less</strong>" href="style.less">
- Chrome开发工具审查元素时可以看到css所在LESS文件的行号,这是最重要的一点
Chrome内置了调试SASS的功能,原理就是将SASS文件映射到同名的CSS文件进行调试,CSS文件格式含有如下格式的调试信息标明源文件名及行数反馈给Chrome开发工具
@media -sass-debug-info{filename{font-family:"Z:style.less";}line{font-family:"9";}}
a{
color:blue;
}
开启方法如下:
- 地址栏输入 chrome://flags/
- 启用开发者工具实验(翻译的好别扭,ctrl+f搜索开发者就有了)
- 重启chrome
- 打开开发者工具,windows下快捷键是F12,点击开发者工具右下角的设置图标进入设置面板
- 在Expirments面板中,启用 Support for Sass
本文中调试LESS要先按上面步骤开启Sass,若使用CssGaga编译LESS,下面的操作流程很简单:
- CssGaga升级至build211版本
- 点CssGaga右下角的更多,勾选LESS面板的Debug选项,开启Less的Debug模式
- 拖less至CssGaga生成css文件
之后刷新页面即可在Chrome看到效果(页面要先去除less.js,link标签的rev属性去除/less)
若闲每次拖文件来生成css文件很麻烦,可勾选CssGaga界面上的监听选项来根据文件变动自动生成
注:发布时请取消Debug模式来生成CSS文件
若不使用CssGaga编译less,按以下流程:
1.找到less编译工具包里的tree.js,将
tree.debugInfo.asMediaQuery = function(ctx) {
return '@media -sass-debug-info{filename{font-family:' +
('file://' + ctx.debugInfo.fileName).replace(/[/:.]/g, '\$&') +
'}line{font-family:\00003' + ctx.debugInfo.lineNumber + '}}n';
};
替换为
tree.debugInfo.asMediaQuery = function(ctx) {
return '@media -sass-debug-info{filename{font-family:"' + ctx.debugInfo.fileName + '";}line{font-family:"' + ctx.debugInfo.lineNumber + '";}}n';
};
2.编译命令加入 –line-numbers=mediaquery 参数,例如 lessc --line-numbers=mediaquery style.less style.css