10 个 DevTools 技巧助你进行 CSS 和 UX 设计

介绍

什么是 DevTools？

1. 打开设计模式

2. 颜色选择器

3. Flexbox 编辑和调试

4.渐变选择器

5. 剪辑路径编辑器

6. CSS 概述

7.字体编辑器

8. 变更

9.动画编辑器

10. 设备工具栏

介绍

如今，Web 开发比以往任何时候都更加有趣。与十年前相比，我们拥有越来越多的框架、库、社区、技能和工具，从而拥有了更多的机会。如今，几乎没有 Web 开发者会局限于编写业务逻辑。相反，他们更愿意探索设计、外观和体验，构建端到端的用户体验。

很多时候，如果没有合适的工具支持，这项工作会非常困难。本文将介绍十个使用浏览器 DevTools 的方法，让你在 CSS 和用户体验 (UX) 设计方面更加高效。希望你喜欢。

什么是 DevTools？

现代浏览器为 Web 开发者提供了工具，帮助他们调试源代码、尽早测试更改并更快地构建网页。Google Chrome 浏览器将其称为DevTools，Mozilla Firefox 用户将其称为Web Dev Tools，而 Microsoft Edge 浏览器爱好者则将其称为Developer Tools。为了简单起见，DevTools在本文中我们将所有这些浏览器统称为。

您可以使用组合键 Option + ⌘ + I（macOS 系统）或 Shift + CTRL + I（Windows/Linux 系统）从您常用的浏览器启动 DevTools。例如，下图显示的是 Chrome 浏览器的 DevTools。

Chrome 浏览器开发者工具

好吧，现在让我们深入了解技巧和窍门👇。

1. 打开设计模式

您可以切换到设计模式on来编辑网站上的任何文本。这可以方便地测试动态内容（例如文本）如何影响您的布局。要启用此功能，请执行以下操作：

打开DevTools并转到Console选项卡。
输入document.designMode = "on"并按回车键。

现在，您可以按自己想要的方式编辑浏览器文档了。例如，在下图中，我们看到一些文本发生了变化，通知数量也发生了变化。

图 1.1：设计模式开启

不久前，我曾在 Twitter 技巧中分享过这个很酷的技巧。

所有浏览器都支持此功能，并且它也能与 iFrame 配合使用。太好了，我们继续下一个。

2. 颜色选择器

Color Picker是 DevTools 中 Web 开发者和设计师最常用的工具之一。您可以使用这款工具来调整颜色组合、对比度和可访问性。

图 2.1：颜色选择器

让我们看一下颜色选择器的界面。下图展示了 Chrome DevTools 的颜色选择器。它主要包含四个部分：

颜色选择器/拾色器：您可以通过在特定颜色类型的颜色范围内拖动鼠标指针来选择任意颜色。您还可以选择颜色类型以及不透明度值。根据您的颜色选择，您可以复制不同格式（例如 RGB、HEX 等）的颜色代码。
滴管Eye Dropper：您可以使用小滴管图标在颜色选择器和颜色模式之间切换。该eye dropper模式可帮助您从文档中选择颜色，并在其他位置使用。
颜色对比度：设计带有背景色的网页时，保持文本、链接和其他 HTML 元素颜色的对比度和比例至关重要。您可以检查颜色对比度并进行相应调整，以符合无障碍指南的要求。
*调色板 *：最后是调色板，可从不同类型的颜色选项中进行选择。

图 2.2：颜色选择器部分

下图显示了如何从颜色选择器工具中选择颜色。

图 2.3：颜色选择器

这里是如何检查颜色对比度并进行校正的快速演示。

图2.4：色彩对比度

当该Eye Dropper模式开启时，您可以从网页本身突出显示并选择颜色。

图 2.5：吸管模式

颜色选择器工具界面可能因浏览器而异。到目前为止，我们讨论的所有示例均使用 Chrome 浏览器的 DevTools。

3. Flexbox 编辑和调试

使用 CSSFlexbox容器实现 Flexbox 模块在网页设计中随处可见。弹性布局是我们之前遇到的许多布局问题的简单解决方案。

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

布局Flexbox模块具有许多控制元素布局和位置的属性。Google Chrome 浏览器 90 版本为我们提供了一个超酷的工具来编辑和调试Flexbox属性。

每当 HTML 页面元素带有display: flex或时，面板中该元素旁边display: inline-flex都会显示徽章。此外，面板还会显示一个新图标来打开编辑器。flexElementsStylesFlexbox

图 3.1：Flexbox 编辑器图标

点击图标打开编辑器。现在，您可以根据需要选择任意 Flexbox 属性。选择属性后，它们会添加到相应的 HTML 元素样式中。

图 3.2：Flexbox 编辑器

4.渐变选择器

CSS 渐变允许你在两种或多种颜色之间显示平滑的过渡。通常，你可以创建两种类型的渐变，

线性渐变：使用这种类型的渐变，颜色过渡可以向左、向右、向上、向下和对角线进行。
径向渐变：它们的中心定义径向渐变。

要创建渐变，我们需要使用方向、颜色、位置等参数。您可能需要为每个参数尝试不同的值才能获得所需的渐变效果。Google Chrome 浏览器Devtools提供了渐变选择器，可以精确地帮助您完成此操作。您可以尝试更改参数值，以便更快地获得所需的渐变效果。

下图展示了一个 45 度方向的线性渐变，其中包含几种颜色。点击方向值会弹出一个方向选择器。你可以使用它来调整方向。

图 4.1：渐变选择器

查看这条推文，了解玩起来有多么容易（我玩得很开心）。

5. 剪辑路径编辑器

CSSclip-path是创建任意形状的绝佳方式。clip-path 属性会创建一个剪切区域，用于决定元素的显示部分。剪切区域之外的区域将被隐藏。以下是使用clip-pathCSS 属性创建矩形多边形的示例：

clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);

Web 开发者通常会尝试不同的 clip-path 值组合，最终确定自己想要的形状。然而，clip-path 属性的记忆和编码有点困难。如果我们能用编辑器创建自己想要的形状，并根据形状对应的 clip-path 值进行操作，那就容易多了。DevToolsMozilla Firefox提供了一个 clip-path 编辑器，只需拖放几下鼠标即可创建形状。

要使用它，请检查其样式中包含 clip-path CSS 属性的 HTML 元素。您会注意到 clip-path 值前面有一个小形状。单击该小形状即可选择元素的剪切区域。