Chrome 调试本地less样式

今天记录一种十分高效的在Chrome控制台调试less样式的方法，从而本地就直接保存了。这样子就不需要来回的切换浏览器-->编辑器，真正做到了在线实时查看效果的高效开发。（提前装好npm）

1.新建一个项目然后打开Chrome控制台，找到Sources如下图右键，添加本地的目录进来，这时候浏览器会询问权限，点允许即可

WX20170401-182347.png

next-->是将本地的项目跟浏览器进行绑定，按照图片点击即可

22.png

next--> 这个时候直接回车，相当于询问浏览器与本地哪一个index.html进行匹配

3.png

这个时候第一步就走完了，此时修改控制台的css样式本地就会同步修改，接下来不要着急，该进行最关键的less配置。

2.打开命令行

• npm install -g less （全局安装less配置），如果安装成功的话可以，输入lessc -v查看下版本号
• 新建一个index.less文件书写自己的样式，接下来npm install -g wr 相当于安装了一个watch监视器。
  • 然后 wr 'lessc index.less index.css' index.less 就是监视less文件的改动，可以修改下index.less里的样式测试下css文件有没有随之改动。然后ctrl+c退出监视状态。

3.继续 lessc --source-map index.less index.css 这句话就是可以跟浏览器发生关系的前提，这时候你的css目录中会多了一个index.css.map,
你的css文件结尾也会多出下面这句话,稍后浏览器会找到这个map文件，然后切换到浏览器

 /*# sourceMappingURL=index.css.map */
 

• 控制台setting里找到，找到css source maps勾选中

77.png

4.ending

• 命令行 wr 'lessc index.less index.css' index.less ，开启监视状态
  直接在浏览器less文件中修改，本地也保存了，yeal ！双击评论666~~~

true1111111111.png