使用开发者工具在浏览器中调整设计

让我们看看如何使用浏览器的开发者工具来进行设计工作。有一些隐藏的技巧可能会派上用场！

使用复选框切换类

这在尝试从不同选项中选择设计或在不手动在开发者工具中添加类的情况下切换元素的活动状态时非常有用。

为了实现这一点，我们可以使用不同的类并在其中限定样式。因此，如果我们想查看横幅设计的不同选项，我们可以执行以下操作

.banner-1 {
  /* Style variation */
}

.banner-2 {
  /* Style variation */
}

Google Chrome 使我们能够添加所有这些类并使用复选框切换（显示/隐藏）它们，以便在它们之间进行快速比较。

查看 演示 Pen。

使用 designMode 编辑内容

Web 内容是动态的，因此我们的设计应该灵活，我们应该测试各种类型和长度的内容。例如，输入一个非常长的单词可能会破坏设计。要检查这一点，我们可以使用 document.designMode 直接在浏览器中编辑我们的设计。

这可以帮助我们在不手动编辑源代码中的内容的情况下测试我们的设计。

隐藏元素

有时我们需要隐藏设计中的元素以检查没有它们时的外观。Chrome 开发者工具使我们能够检查元素并从键盘输入 h 以通过切换 CSS 可见性属性来隐藏它。

如果您想隐藏一些元素以截取屏幕截图，然后与您的团队/设计师/经理讨论，这将非常有用。有时我使用此功能隐藏元素，然后截取屏幕截图以在 Photoshop 中模拟一个快速的想法。

截取设计元素的屏幕截图

Firefox 开发者工具中有一个有用的功能，可以截取 DOM 中特定元素的屏幕截图。通过这样做，我们可以并排比较我们的变体，看看哪一个是最佳选择。

请按照以下步骤操作

1. 打开 Firefox 开发者工具
2. 右键单击一个元素并选择“截取节点屏幕截图”
3. 屏幕截图将保存到默认下载文件夹中

如果您想使用 Chrome 进行屏幕截图，也可以。有一个名为“Element Screenshot”的 插件 可以完成几乎相同的工作。

更改设计颜色

在每个设计项目的早期阶段，您可能都在探索不同的调色板。CSS 的 hue-rotate 函数是一个强大的过滤器，它使我们能够直接在浏览器中更改设计颜色。它会导致图像或元素中每个像素的色调旋转。该值可以以 deg 或 rad 为单位指定。

在下面的视频中，我在组件中添加了 filter: hue-rotate(value)，请注意所有颜色如何变化。

请注意，应用 hue-rotate 会影响每个设计元素。例如，用户头像颜色看起来不正确。我们可以通过应用 hue-rotate 的负值来恢复正常外观。

.bio__avatar {
  filter: hue-rotate(-100deg);
}

查看 演示 Pen。

使用 CSS 变量（自定义 CSS 属性）

即使支持仍然不是 完全跨浏览器 友好（它 目前 正在 Microsoft Edge 中开发），我们今天可以获得 CSS 变量的好处。使用它们来定义间距和颜色单位将使通过动态更改微小值来进行巨大更改变得容易。

我为我们的网页定义了以下内容

:root {
  --spacing-unit: 1em;
  --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */
  --brand-color-primary: #7ebdc2;
  --brand-color-secondary: #468e94;
}

这些变量将用于整个网站的元素，如链接、导航项、边框和背景颜色。更改开发者工具中的单个变量时，所有关联的元素都将受到影响！

使用 CSS filter: invert() 反转元素

当您有白色文本在黑色背景上或反之亦然时，这很有用。例如，在标题中，我们在黑色背景上使用白色显示页面标题，通过向元素添加 filter: invert，所有颜色都将反转。

CSS 可视化编辑器

此功能每天都在变得更好。Safari 具有非常好的 UI 工具来编辑值。Chrome 正在缓慢地向开发者工具添加类似的功能。

Chrome 有一些很酷的东西，例如 box-shadow、background-color、text-shadow 和 color。

我认为这对于不太了解 CSS 的设计师来说非常有用。像这样可视化地编辑事物将使他们能够更好地控制一些设计细节，他们可以在浏览器中调整事物并将结果显示给开发人员以进行实现。