在Chrome中像调试SASS一样调试LESS

看完本文后在Chrome中调试LESS时所带来的便利有

  1. 不用在页面中调用less.js
  2. 页面调用less时rel用普通的css写法即可 <link rel="stylesheet" href="style.less">,不用写成 <link rel="stylesheet<strong>/less</strong>" href="style.less">
  3. 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;
}

开启方法如下:

  1. 地址栏输入 chrome://flags/
  2. 启用开发者工具实验(翻译的好别扭,ctrl+f搜索开发者就有了)
  3. 重启chrome
  4. 打开开发者工具,windows下快捷键是F12,点击开发者工具右下角的设置图标进入设置面板
  5. 在Expirments面板中,启用 Support for Sass

本文中调试LESS要先按上面步骤开启Sass,若使用CssGaga编译LESS,下面的操作流程很简单:

  1. CssGaga升级至build211版本
  2. 点CssGaga右下角的更多,勾选LESS面板的Debug选项,开启Less的Debug模式
  3. 拖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

参考资料:Debug LESS With Chrome Developer Tools