前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css调试技巧

css调试技巧

作者头像
matinal
发布2020-11-27 14:55:57
6800
发布2020-11-27 14:55:57
举报
文章被收录于专栏:SAP Technical

一、CSS调试技巧

调试CSS

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

具体步骤

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

调试CSS技巧-1.png

  1. 拖动之后浏览器头部会出现是否允许访问本地文件夹的权限,点击允许
  2. 授权浏览器可以访问本地文件夹后,本地文件夹中的文件就显示如图所示

调试CSS技巧-2.png

  1. 点击index.css文件,准备修改h1的样式

调试CSS技巧-3.png

  1. 修改index.css文件,准备保存index.css文件

调试CSS技巧-4.png

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

调试CSS技巧-5.png

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

调试CSS技巧-6.png

二、LESS调试技巧

less调试

  1. 使用npm安装lessc和wr工具
  2. 使用lessc命令编译less文件
  3. 调试器启动[重新加载生成的css]模式
  4. 使用wr命令跟踪文件修改实时编译
代码语言:javascript
复制
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

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

调试less-2.jpg

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

调试less-3.jpg

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

调试less-4.jpg

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

调试less-5.jpg

  1. bug

调试less-6.jpg

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

调试less-7.jpg

CSS vs LESS

CSS

  • 原生支持,无需安装工具
  • 可以直接用样式面板修改源码,实时保存
  • 代码繁琐,可维护性差 less
  • 代码简洁,可维护性好
  • 需要工具支持
  • 不可用样式面板直接修改
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/01/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、CSS调试技巧
    • 调试CSS
      • 具体步骤
  • 二、LESS调试技巧
    • less调试
      • 具体步骤
      • CSS vs LESS
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档