值得拥有的 UI 调试技巧
时间:2020-05-30
本文章向大家介绍值得拥有的 UI 调试技巧,主要包括值得拥有的 UI 调试技巧使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天加班学会了一个UI调试技巧,发现真的很不错,于是马上手动试验了一把
如图:
结合我们实际业务开发,当我们查看一个元素的位置及大小并修改它的 CSS,我们会使用开发者工具的因此就会频繁使用 DevTools 中的选择元素功能。
这样做感觉太拉低调试效率了,所以第一张图是的效果是怎么实现的呢?
很简单,只需要在网站添加以下样式即可:
html * {
outline: 1px solid red
}
这里没有使用 border
的原因是 border
会增加元素的大小但是 outline
不会。
通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置,还能帮助我们方便地查看任意网站的布局。
另外我们还可以通过一个开关来实现任意网页开启关闭这个功能。
只需要借助 Chrome 的书签功能。
-
打开书签管理页
-
右上角三个点「添加新书签」
-
名称随意,粘贴以下代码到网址中
1 javascript: (function() { 2 var elements = document.body.getElementsByTagName('*'); 3 var items = []; 4 for (var i = 0; i < elements.length; i++) { 5 if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) { 6 items.push(elements[i]); 7 } 8 } 9 if (items.length > 0) { 10 for (var i = 0; i < items.length; i++) { 11 items[i].innerHTML = ''; 12 } 13 } else { 14 document.body.innerHTML += 15 '<style>html * { outline: 1px solid red }</style>'; 16 } 17 })();
然后我们就可以在任意网站上点击刚才创建的书签(style标签),内部会判断是否存在调试的 style
。存在的话就删除,不存在的话就添加,通过这种方式我们就能很方便的通过这个技巧查看任意网页的布局了。
本文主要参考:https://mp.weixin.qq.com/s/tOgTYkgEYb95BZlzsXUJlQ
原文地址:https://www.cnblogs.com/yjiangling/p/12993862.html
- Java基础-18(01)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 一个oracle查询引起的bug (r4笔记第59天)
- Java基础-18(02)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 特殊的物化视图刷新 (r4笔记第77天)
- 通过单例模式模拟RAC连接 (r4笔记第76天)
- 网站上的验证码是怎么产生的?
- Java基础-17(01)总结,登录注册案例,Set集合,HashSet
- mongoDB初探第一篇(r4笔记第75天)
- 重温快速排序(r4笔记第73天)
- Java基础-17(01)总结,TreeSet,LinkHashSet
- 海量数据迁移之数据抽取流程 (r4笔记第72天)
- CSS Selectors Level 4新特性全面解析
- 巧用外部表避免大量的insert (r4笔记第71天)
- 如何用java语言实现C#中的ref关键字(按引用传递参数)的效果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python Matplotlib数据可视化 绘制箱形图、散点图和直方图
- 【Lighthouse教程】scrapy爬虫初探
- Python爬虫 爬取B站视频弹幕 + 绘制词云
- Python爬虫学习笔记 asyncio+aiohttp 异步爬虫原理和解析
- Python数据分析 利用NetworkX绘制网络图
- Python爬虫练习 爬取网络小说保存到txt
- Python爬取链家成都二手房源信息 asyncio + aiohttp 异步爬虫实战
- Python matplotlib数据可视化 subplot绘制多个子图
- python pathlib模块的基本使用和总结
- Python 爬取前程无忧最新招聘数据 matplotlib数据分析与可视化
- Python opencv图像处理基础总结(一)
- Python opencv图像处理基础总结(二) ROI操作与泛洪填充 模糊操作 边缘保留滤波EPF
- python asyncio+aiohttp异步请求 批量快速验证代理IP是否可用
- python pyecharts数据可视化 玫瑰图、柱形图、饼图、环图
- Python opencv图像处理基础总结(三) 图像直方图 直方图应用 直方图反向投影