Chrome DevTools的10个开发设计实用小技巧

897 阅读2分钟

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、网页标尺

  • 测量网页元素 在这里插入图片描述

标尺会出现在页面上:更方便测量元素的大小

在这里插入图片描述