A free Chrome extension that outlines Lightning Web Components and Aura components right on the page — so you can tell instantly which component owns which part of the UI.
Toggle a highlight layer over any Salesforce page. Component boundaries and API names become visible, and the page stays fully usable underneath.
Finds custom Lightning Web Components anywhere on the page, including components nested inside shadow DOM, and labels each one with its tag name.
Detects custom Aura components and shows their component name. Aura wrappers that only contain an LWC are skipped, so you see the component that actually renders the UI.
Highlights are drawn as a non-interactive overlay layer. Nothing is written into Salesforce's own DOM, and every button and field underneath stays clickable.
Lightning swaps the DOM as you move between records, tabs and console subtabs. Highlighting follows along and reapplies itself automatically.
Pick any highlight color for LWC and Aura. Choices sync across your Chrome profile, and existing highlights repaint live.
Export a JSON list of every component detected on the current page — handy for documentation, handovers and bug reports.
Anyone who has ever asked "which component is this, and where do I change it?"
All shortcuts are remappable at chrome://extensions/shortcuts.
| Action | Default |
|---|---|
| Toggle LWC highlights | Ctrl + Shift + L |
| Toggle Aura highlights | Ctrl + Shift + U |
| Clear all highlights | Ctrl + Shift + X |
| Hover-only labels | Ctrl + Shift + K |
| Export snapshot | Unassigned — set your own |
The extension reads the page structure and nothing else. No page content, record data, field values or credentials are collected, stored or transmitted. There is no analytics, no account and no server — your preferences live in your own browser profile.
Full details in the privacy policy.
Planned for the next release — not yet available.
Want something on this list sooner? Tell me what would help.
Salesforce Component Highlighter