Heading Highlighter

Toggle colored outlines and level badges on every heading (h1–h6) on the page. Badges track resize and layout changes.

Heading Highlighter shows you the heading structure of any web page in one click. Click the toolbar icon and every heading (h1–h6, plus ARIA role="heading" elements) gets a color-coded outline and a small badge showing its level — pink for H1, orange for H2, green for H3, blue for H4, purple for H5, grey for H6. A count of headings per level is printed in the DevTools console. Click the icon again to remove everything cleanly. Built for SEO audits, accessibility reviews, and front-end QA: • Spot missing or duplicate H1s at a glance • Catch skipped heading levels (H2 → H4) that hurt accessibility • Find headings styled as body text, or body text styled as headings • Verify heading hierarchy after a CMS or page-builder change Badges track the page as it changes — they reposition on window resize and layout shifts (accordions opening, fonts loading, images sizing in), and headings hidden inside collapsed sections are skipped until they appear. Privacy: no data is collected, stored, or transmitted — there's no backend, no analytics, no tracking. The extension uses only the activeTab and scripting permissions, meaning it runs solely on the tab you're viewing, only at the moment you click the icon. It has no access to any page until you click.