構想

靈感來自 HTML-tree

提供

• 👁 頁面上標題的反白顯示，幫助理解它們的位置
• 🌳 頁面結構的樹狀檢視，讓您能夠像瀏覽詞彙表一樣「看到」您的頁面

安裝

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

設定

您可以透過 Story 的參數，為特定的 Story 啟用或停用預設的反白顯示

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 tree

授權

MIT