Chrome 调试本地less样式

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

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

Chrome 调试本地less样式_第1张图片
WX20170401-182347.png

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

Chrome 调试本地less样式_第2张图片
22.png

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

Chrome 调试本地less样式_第3张图片
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勾选中
Chrome 调试本地less样式_第4张图片
77.png

4.ending

  • 命令行 wr 'lessc index.less index.css' index.less ,开启监视状态
    直接在浏览器less文件中修改,本地也保存了,yeal !双击评论666~~~
Chrome 调试本地less样式_第5张图片
true1111111111.png

你可能感兴趣的:(Chrome 调试本地less样式)