Item logo image for LWC Lens

LWC Lens

5.0(

1 rating

)
Item media 1 (screenshot) for LWC Lens

Overview

Inspect Lightning Web Components on Salesforce pages — hover to identify, view component trees, copy component paths.

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.

Details

  • Version
    1.0.0
  • Updated
    February 14, 2026
  • Size
    34.6KiB
  • Languages
    English
  • Developer
    Email
    artur.kolasa@tucario.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

iFrame Finder - 提取网页中的所有iframe元素

5.0

快速提取并查看当前页面上的所有iframe元素,包括源URL、路径和嵌套结构。

Elementor - Inspect, Copy & Download Elements

5.0

Visual Element Inspector with CSS Copy, Color Picker, Asset Download & DOM Eraser

Salesforce Field Detective

5.0

A helpful extension for Salesforce users. Add API names of object's fields to the page, making it easier to identify fields

LWC Debugger

5.0

Adds a Lightning tab to DevTools for debugging LWC on Salesforce Lightning pages.

Salesforce Markup Builder

5.0

Salesforce Markup Builder is a UI design tool that helps developers, admins and designers quickly create Lightning Web Components.

Hnspector - Inspect headings

5.0

Inspect heading structure for SEO. Find, highlight and copy on any H tag on a web page.

Web Inspector

4.6

Use Web Inspector tool as a CSS viewer and website inspector for any page. It is a browser plugin for google chrome inspect element.

CSS Inspector Pro

5.0

Beautiful CSS, HTML & Style Inspector with copy functionality

Salesforce Org Banner

5.0

Adds a customizable banner with a label to the top of Salesforce pages, enhancing navigation and organization.

Claude Bridge

5.0

Inspect React elements and send component context to Claude Code via MCP

Again, Why Salesforce

5.0

Create and manage custom Tabs in the available space on Salesforce Lightning Setup page.

UI Inspector - Visual CSS Editor

4.2

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

iFrame Finder - 提取网页中的所有iframe元素

5.0

快速提取并查看当前页面上的所有iframe元素,包括源URL、路径和嵌套结构。

Elementor - Inspect, Copy & Download Elements

5.0

Visual Element Inspector with CSS Copy, Color Picker, Asset Download & DOM Eraser

Salesforce Field Detective

5.0

A helpful extension for Salesforce users. Add API names of object's fields to the page, making it easier to identify fields

LWC Debugger

5.0

Adds a Lightning tab to DevTools for debugging LWC on Salesforce Lightning pages.

Salesforce Markup Builder

5.0

Salesforce Markup Builder is a UI design tool that helps developers, admins and designers quickly create Lightning Web Components.

Hnspector - Inspect headings

5.0

Inspect heading structure for SEO. Find, highlight and copy on any H tag on a web page.

Web Inspector

4.6

Use Web Inspector tool as a CSS viewer and website inspector for any page. It is a browser plugin for google chrome inspect element.

CSS Inspector Pro

5.0

Beautiful CSS, HTML & Style Inspector with copy functionality

Google apps