基本布局调试

作为前端开发者，我们花费大量时间使用 CSS 构建布局。这意味着需要不断对照设计规范来交叉检查已编码的组件。确保我们选择了正确的 margin 和 padding 值，或者确保元素定位正确。

浏览器开发者工具在调试盒模型方面非常出色，但在快速检查间距和对齐时却显得笨拙。你必须在多个标签页之间来回切换才能找到所需信息。

Storybook 6.3 引入了一套新的插件，它结合了浏览器开发者工具的强大功能和设计工具的易用性。你可以轻松测量距离并验证尺寸和定位。它们还使得非开发者也能进行布局调试。

继续阅读，了解更多关于 Measure 和 Outline 插件的信息。以及如何利用它们加速你的 UI 开发工作流程。

间距

你不能仅凭肉眼判断两个元素之间的距离。你需要某种方式来测量它。在 Figma 和 Sketch 等设计工具中，你可以按住 option 键来测量图层之间的距离。信息直接叠加在你正在评估的 UI 上方。因此，你只需看一眼即可检查间距。比在开发者工具中点击来点击去快多了！

The Measure 插件将这一熟悉的功能带到了 Storybook。

CSS 中的空白稍微复杂一些。它是 margin、padding 和 border 的组合。因此，Storybook 将可视化盒模型，并显示所选 DOM 节点的尺寸。

从工具栏启用插件，或者按 m 键并悬停在你想要检查的元素上。

对齐

检查视觉对齐是构建布局的另一个关键方面。当 DOM 元素相距很远或形状不规则时，这会变得特别棘手。Pesticide 首创了为页面上每个 UI 元素添加轮廓的技术。这些轮廓充当指引，使验证定位变得容易得多。

The Outline 插件让你只需点击一下即可为所有 UI 元素切换轮廓。你可以立即发现 bug 和损坏的布局！

立即获取

Measure 和 Outline 插件是必备工具包的一部分，现已在 Storybook 6.3 beta 版本中提供。在你的项目根目录下运行以下命令即可安装。

npx sb@next init

升级现有项目

npx sb upgrade --prerelease

并更新你的 Storybook 配置 (.storybook/main.js) 以包含 essentials 插件。

module.exports = {
  addons: ['@storybook/addon-essentials'],
};

参与其中

Storybook 的基本布局插件使得按照规范构建变得更加容易。开发者只需点击一下即可获取 DOM 元素的 margin、padding 和尺寸。设计师无需依赖开发者工具即可验证布局。

专业 UI 开发者每天都依赖 Storybook。该项目由 1,300 多名开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果你有兴趣贡献，请在GitHub 上查看 Storybook，创建 Issue，提交 Pull Request 或构建插件。在Open Collective 上捐赠。在Discord 中与我们聊天——通常会有维护者在线。通过Twitter 和订阅我们的邮件列表了解 Storybook 的最新消息。