Chrome DevTools 不只是开发者的工具,也是网页设计师的好帮手。下面来介绍十个非常实用的设计功能。
设定自己熟悉的语言
- 支持超过80种语言
选择语言下拉菜单后,重新加载DevTools即可生效。
下面进入正题拉~
1、长度编辑工具
- 单位:下拉式菜单
- 数值:拖动鼠标
- 长度:单击数值
鼠标悬停后即可下拉选择长度单位;
鼠标悬停在数值上,鼠标会变为水平光标,这时可以左右拖动来修改数值大小;
如果想要数值 + -10,利用shift + 左右拖动
即可。
2、角度编辑工具
- 视觉化角度以及渐变色
拖动时钟里的指针以更改角度;
还可以在编辑器里预览颜色的变化;
除此之外,Shift + 点击时钟
可以更改角度的单位。(deg、grad、rad、turn)
3、网格Grid编辑工具
- 网格元素徽章
- 网格编辑器
- 布局窗格
点击layout,勾选显示轨道名称、轨道大小,页面上会显示对应的数值(定义长度和实际计算长度);
还可以预览和编辑网格grid。
4、Flexbox编辑工具
- Flexbox元素徽章
- Flexbox编辑器
- 布局窗格
单机flex显示元素的叠加层;
点击layout,可在Flexbox overlays查看页面中所有的flex布局,勾选可以展示每个元素的叠加层。
5、Container Queries编辑工具
- 容器查询徽章
- 更改查询条件
点击contanier徽章,网页将突出显示该容器元素
6、变更标签页
- 跟踪本地源代码的变更
更方便检查源码的变化。
7、CSS概况
- 网页颜色和字体的概括
- 未使用的CSS申明
- 媒体查询数量
8、字体和颜色编辑工具
- 编辑字体样式
- 更改颜色格式
- 更改颜色盘预览
- 检查颜色对比度
- 颜色修复建议
修改对比度:
9、模拟功能
- 模拟停用AVIF/Webp图片格式
- 模拟auto dark mode
- 模拟prefers-color-scheme
- 模拟prefers-reduce-motion
- 模拟color-gamut
停用AVIF/Webp图片格式:
自动暗黑模式,将所有网页都渲染成暗黑模式:
更多的模拟功能:模拟色域CSS color-gamut、模拟减弱动画CSS prefers-reduced-motion、模拟视觉缺陷
10、网页标尺
- 测量网页元素
标尺会出现在页面上:更方便测量元素的大小