Storybook Addon Measure

用于检查布局和可视化盒模型的 Storybook 插件。

1. 按 m 键启用插件

2. 将鼠标悬停在 DOM 节点上

3. Storybook 将以像素为单位显示所选元素的尺寸——边距、填充、边框、宽度和高度。

用法

此插件需要 Storybook 6.3 或更高版本。Measure 是 基础功能 的一部分，因此默认情况下已安装在所有新的 Storybook 中。如果您需要将其添加到您的 Storybook 中，您可以运行

npm i -D @storybook/addon-measure

在您的 .storybook/main.js 中的 addons 数组中添加 "@storybook/addon-measure"

export default {
  addons: ['@storybook/addon-measure'],
};

灵感来源

• Inspx 由 Rauno Freiberg 创建
• Aaron Westbrook 的脚本
• Visbug 来自 Chrome 团队