Salesforce Component Highlighter — LWC & Aura
Unknown author · Developer Tools
Media
5 items
Description
Highlight LWC and Aura component boundaries on any Salesforce page. Inspect, debug and document Lightning & Experience Cloud. See which Lightning component owns which part of the page - without opening DevTools. Salesforce Component Highlighter draws an outline around every custom Lightning Web Component and Aura component on a Salesforce page and labels it with its API name. Flip it on, and the structure of the page becomes obvious. Whether you’re building in Lightning Experience, Experience Cloud, or Classic — this extension makes it simple to see what’s on the page. WHAT IT DOES 🟩 Highlights custom Lightning Web Components (c-*), including components nested inside shadow DOM 🟧 Highlights custom Aura components, using their component name 🎯 Skips Aura wrappers that only contain an LWC, so you see the component that actually renders the UI 🔢 Live counts of how many LWC and Aura components were found on the page 🎨 Your own highlight color for each type, synced across your Chrome profile 👆 Hover mode: show a label only for the component under your cursor 📄 Snapshot export: a JSON list of every component on the page, for documentation and bug reports ⌨️ Keyboard shortcuts and right-click menu toggles BUILT TO STAY OUT OF THE WAY ✅ The page stays fully clickable. Highlights are a pass-through overlay, so every button and field underneath still works. ✋ Nothing is written into Salesforce's own DOM - no injected nodes, no inline style changes on your components. 🔄 Highlighting survives Lightning navigation, record changes and console subtabs. 🔋 An idle tab stays idle. Position updates are driven by scroll, resize and DOM changes rather than running continuously. WHERE IT WORKS Lightning Experience, Experience Cloud, Setup and Classic, in production and sandbox. Experience Cloud sites on a custom domain can be enabled per-domain from chrome://extensions. WHO IT'S FOR 💻 Developers - find the component behind a rendered element in seconds 🔧 Admins - see how a Lightning page is composed before changing it 📐 Architects - review an unfamiliar org's UI at a glance 📋 Consultants - document what's on a page during discovery or handover PRIVACY No data collection, and no network requests of any kind. The extension reads page structure to draw outlines; it never reads record data or field values, and there is no analytics, no account and no server. Only your color choices and on/off state are saved, in your own browser. Free, with no ads and no paid tier. Docs and changelog: https://colt255programmer.github.io/salesforce-component-highlighter/ Questions or bugs: bikerthatcodes@gmail.com 👨💻 Developed by Nikhil Kumar – Salesforce Developer & UI Enthusiast Built with ❤️ for the Salesforce community.