Docs — Salesforce Component Highlighter

Getting started

Install from the Chrome Web Store.
Open any Salesforce page — a record, an app, a Lightning console, or an Experience Cloud site.
Click the extension icon and flip Highlight LWC or Highlight Aura.

Highlights stay on as you navigate. Use Clear all highlights or Ctrl + Shift + X to turn everything off.

Shortcuts

Remap any of these at chrome://extensions/shortcuts.

Action	Default	Notes
Toggle LWC highlights	`Ctrl` + `Shift` + `L`	Custom `c-*` components
Toggle Aura highlights	`Ctrl` + `Shift` + `U`	Custom Aura components
Clear all highlights	`Ctrl` + `Shift` + `X`	Turns both layers off
Hover-only labels	`Ctrl` + `Shift` + `K`	Show a label only for the component under the cursor
Export snapshot	Unassigned	Assign your own key, or use the popup button

The same three toggles are also on the right-click menu of any Salesforce page.

How detection works

Lightning Web Components

The extension walks the page — including open shadow roots — and treats any element whose tag name begins with c- as a custom LWC. The label shows the tag name exactly as it appears in the DOM, for example c-contact-card.

Aura components

Aura components are identified from their data-aura-class, data-component-id or data-target-selection-name attribute. Only components in the default namespace are matched, so Salesforce's own base components stay unhighlighted.

An Aura component that exists purely to wrap an LWC is skipped, so you see the component doing the rendering rather than a stack of nested outlines around the same pixels.

Visibility

Elements with no rendered size — display: none, collapsed containers, inactive tabs — are skipped, and outlines disappear on their own when a component is hidden or removed.

Known limitation: components inside a closed shadow root cannot be read by any extension, and components in a namespaced or managed-package org are not detected yet — broader namespace support is the next feature on the roadmap.

Where it runs

The extension activates only on Salesforce domains.

Domain	Covers
`*.force.com`	Lightning Experience, Visualforce, Sites, sandboxes, scratch orgs
`*.salesforce.com`	Classic, My Domain orgs, sandboxes
`*.salesforce-setup.com`	Setup with enhanced domains
`*.my.site.com`	Experience Cloud sites
`*.salesforce-experience.com`	Experience Cloud with enhanced domains
`*.salesforce-sites.com`	Public Salesforce Sites

On a custom (vanity) domain? Experience Cloud sites served from your own domain aren't on the list above, because the extension deliberately does not request access to every website. Grant access for that one origin from the extension's details page in chrome://extensions — set Site access to On specific sites and add your domain.

Troubleshooting

The popup says the page isn't Salesforce

Either the tab is on a domain outside the list above (see the vanity-domain note), or the page hadn't finished loading. Reload and try again.

Nothing gets highlighted

The page may genuinely have no custom components — many standard Salesforce screens are built entirely from base components, which are not highlighted by design. If your org uses a namespace, detection isn't supported yet.

Highlights vanished after switching subtabs

They should reapply within a fraction of a second. If they don't, toggle the layer off and on, and please report it with the page type.

Outlines are slightly offset

Overlays track element positions on scroll, resize and DOM changes. A component animating its own position can lag by a frame. Report a case that stays misaligned.

I changed a shortcut and it stopped working

Chrome silently drops a shortcut that collides with another extension or a browser default. Check chrome://extensions/shortcuts.