想法

灵感来自 HTML-tree

提供

• 👁 页面标题的突出显示，帮助理解其位置
• 🌳 页面结构的树状视图，使您能够以词汇表的形式“查看”您的页面

安装

// .storybook/main.js
module.exports = {
addons: [require.resolve('storybook-addon-poleaxe/preset')],
};

配置

您可以通过故事参数默认启用或禁用特定故事的突出显示

HighlightedByDefault.parameters = {
  poleaxe: {
    highlighter: true,
  }
}

您还可以控制 MutationObserver 的行为

StaticStory.parameters = {
  poleaxe: {
    mutationObserver: true | false, // enabled of disabled for all
    mutationObserver: 'highlighter' | 'panel', // enabled only for some pieces
  }
}

另请参见

• HeadingsMap Chrome 扩展
• HTML 树

许可证

MIT