LWC Lens

About

Salesforce retired the Lightning Inspector extension in February 2024, leaving developers without a way to identify which Lightning Web Component owns a given element on the page. LWC Lens fills that gap.

Hover over any element on a Salesforce Lightning page and instantly see:

- Which LWC component owns it
- The component's tag name and namespace
- Its position in the component hierarchy

Key features:

Hover-to-inspect — Activate with Ctrl+Shift+L (Cmd+Shift+L on Mac) or via the toolbar popup. Hover over any element to see a color-coded highlight overlay with the component name in a tooltip.

Component tree — Open Chrome DevTools and navigate to the LWC Lens panel to see a full, searchable tree of every LWC component on the page. Click any node to highlight it on the page, or hover on the page to highlight the corresponding tree node.

Copy with right-click — Right-click any element while LWC Lens is active to copy the component name, tag name, or full component path directly to your clipboard.

Color-coded namespaces — Custom components (c-*) are highlighted in blue, Salesforce base components (lightning-*) in orange, and other custom elements in purple, so you can quickly distinguish component origins.

Works everywhere Salesforce does — Supports Lightning Experience, Experience Cloud sites, Visualforce pages with embedded LWC, and localhost development. Handles native shadow DOM, synthetic shadow DOM, Lightning Web Security (LWS), and Locker Service.

Zero overhead when off — No event listeners, no DOM observers, and no retained references when the extension is inactive. When active, hover detection is debounced to stay within a 60fps budget.

Built for Salesforce developers who need to understand page structure, debug component boundaries, or trace which custom component renders a specific element — without digging through the Elements panel.