css调试技巧

更多内容关注公众号：SAP Technical 

在chrome浏览器中修改css文件，本地文件中的映射的css文件同步修改

一、CSS调试技巧

调试CSS

1. 添加工作目录
2. 建立文件映射
3. 编辑CSS文件或者使用样式面板修改样式
4. 保存CSS文件

具体步骤

1. 把本地目录文件拖到source面板中

    

   

   调试CSS技巧-1.png

2. 拖动之后浏览器头部会出现是否允许访问本地文件夹的权限，点击允许

3. 授权浏览器可以访问本地文件夹后，本地文件夹中的文件就显示如图所示

1. 

   调试CSS技巧-2.png

2. 点击index.css文件，准备修改h1的样式

    

   

   调试CSS技巧-3.png

3. 修改index.css文件，准备保存index.css文件

    

   

   调试CSS技巧-4.png

4. 本地文件夹中的index.css文件内容相应的修改了

    

   

   调试CSS技巧-5.png

5. 修改elements面板中的样式，点击enter，也可以修改index.css文件中的内容

    

   

   调试CSS技巧-6.png

二、LESS调试技巧

less调试

1. 使用npm安装lessc和wr工具
2. 使用lessc命令编译less文件
3. 调试器启动[重新加载生成的css]模式
4. 使用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文件

具体步骤

1. 运行如下命令监控index.less文件的变化编译成index.css文件

    

   

   调试less-1.jpg

2. 生成source-map文件使index.less和index.css关联起来

    

   

   调试less-2.jpg

3. 在编译生成的index.css中出现如图即为成功

    

   

   调试less-3.jpg

4. 在服务中打开page，elements面板显示已经关联上index.less文件[源文件中关联Index.css]

    

   

   调试less-4.jpg

5. 点击进去修改source面板中的index.less文件，磁盘文件修改成功

    

   

   调试less-5.jpg

6. bug

    

   

   调试less-6.jpg

7. 备注：需要启动这个配置项才可以使index.less和index.css文件关联成功

    

   

   调试less-7.jpg

CSS vs LESS

CSS

• 原生支持，无需安装工具
• 可以直接用样式面板修改源码，实时保存
• 代码繁琐，可维护性差
  less
• 代码简洁，可维护性好
• 需要工具支持
• 不可用样式面板直接修改