看完本文后在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