在chrome浏览器中修改css文件，本地文件中的映射的css文件同步修改
一、CSS调试技巧
调试CSS
- 添加工作目录
- 建立文件映射
- 编辑CSS文件或者使用样式面板修改样式
- 保存CSS文件
具体步骤
-
把本地目录文件拖到source面板中
调试CSS技巧-1.png - 拖动之后浏览器头部会出现是否允许访问本地文件夹的权限，点击允许
-
授权浏览器可以访问本地文件夹后，本地文件夹中的文件就显示如图所示
调试CSS技巧-2.png -
点击index.css文件，准备修改h1的样式
调试CSS技巧-3.png -
修改index.css文件，准备保存index.css文件
调试CSS技巧-4.png -
本地文件夹中的index.css文件内容相应的修改了
调试CSS技巧-5.png -
修改elements面板中的样式，点击enter，也可以修改index.css文件中的内容
调试CSS技巧-6.png
二、LESS调试技巧
less调试
- 使用npm安装lessc和wr工具
- 使用lessc命令编译less文件
- 调试器启动[重新加载生成的css]模式
- 使用wr命令跟踪文件修改实时编译
cnpm i -g less
cnpm i -g wr
wr "lessc duang.less duang.css" duang.less
lessc --source-map duang.less duang.css
注：index.html文件中包含的是index.css文件不是index.less文件
具体步骤
-
运行如下命令监控index.less文件的变化编译成index.css文件
调试less-1.jpg -
生成source-map文件使index.less和index.css关联起来
调试less-2.jpg -
在编译生成的index.css中出现如图即为成功
调试less-3.jpg -
在服务中打开page，elements面板显示已经关联上index.less文件[源文件中关联Index.css]
调试less-4.jpg -
点击进去修改source面板中的index.less文件，磁盘文件修改成功
调试less-5.jpg -
bug
调试less-6.jpg -
备注：需要启动这个配置项才可以使index.less和index.css文件关联成功
调试less-7.jpg
CSS vs LESS
CSS
- 原生支持，无需安装工具
- 可以直接用样式面板修改源码，实时保存
- 代码繁琐，可维护性差
less - 代码简洁，可维护性好
- 需要工具支持
- 不可用样式面板直接修改
