🔎 LWC Explorer

What It Does

LWC Explorer is a Salesforce in-page overlay that brings component inspection and network tracing into the extension workspace—no DevTools required. It captures the real network traffic flowing between your components and Salesforce servers, organizing traces by type (Apex, UI API, GraphQL, REST) and making it easy to debug performance, auth issues, and integration problems.

Core Capabilities

• Component tree inspection — See the full hierarchy of Lightning Web Components and Aura components on the page. Search by name, filter by type (LWC, Aura, LMS), and jump to a component with visual highlighting.
• Network trace capture — Automatically record all Apex, UI API, GraphQL, and REST API traffic. View request/response payloads, status codes, and timing inline.
• Intelligent filtering — Quickly focus on errors, specific API categories, or performance bottlenecks. Ignore internal Salesforce telemetry—only see business traffic.
• LMS monitoring — Discover Lightning Message Service channels, subscribe, publish test messages, and watch activity in real time (beta feature).
• Lookup navigation — Click Salesforce record IDs in trace responses to jump to those records. Use breadcrumbs to backtrack.

How to Access LWC Explorer

Open LWC Explorer from any Salesforce page using one of these methods:

The overlay panel appears on the right side of the page (or bottom, depending on your dock preference). Once open, you can pick components, filter traces, or enable auto-capture to start debugging.

Header Controls & Actions

The LWC Explorer header provides quick access to component selection, trace capture, filtering, and tree navigation. Here's what each button does:

Component Tree & Selection

The left panel shows a hierarchical tree of all Lightning Web Components, Aura components, and Lightning Message Service channels on the page. Use the filter pills and search box to narrow down quickly.

Filter Pills

Click any pill to show only that component type:

• All — Displays all component types together
• LWC — Lightning Web Components only
• Aura — Aura components only
• LMS — Lightning Message Service channels (beta)

Search Components

Type a component name to filter the tree in real-time. Matching components auto-expand so you can navigate without collapsing/expanding manually. Clear the search to show the full tree again.

Selecting a Component

Click any component name to select it. The detail pane on the right updates instantly to show:

• Component name (with copy-to-clipboard button)
• Highlight button to visually mark the component on the page
• All network traces triggered by or flowing through that component

Capturing & Filtering Network Traces

The right panel displays all captured network traces (server API calls) for the selected component. Traces are categorized by type and filterable by keyword or status. Use filter chips to focus your debugging.

Trace Capture Modes

• Manual (Scan) — Click the Scan button, perform an action on the page, then click Stop Scan to capture that interaction's network traffic.
• Auto-Capture (Live) — Toggle the green pulse button to continuously record traces every 3 seconds. Useful for monitoring real-time component activity.

Filter Chips

Click any chip to toggle its filter. You can combine multiple filters:

• All — Show all captured traces
• Apex — Server-side Apex calls only (imperative, wire, enqueued actions)
• UI API — Salesforce UI API (record data, field layouts, picklists)
• GraphQL — Salesforce GraphQL operations and queries
• Fetch/API — Other REST traffic (Tooling, Composite, custom endpoints)
• Errors — Failed requests only (4xx, 5xx status codes)

Trace Row Anatomy

Each trace row displays at a glance:

• Badge — Type indicator with color coding
• Label — Friendly name (e.g., "getAccounts", "Upsert Record")
• Endpoint — HTTP method + path or Apex class/method
• Status — HTTP code with color (green 2xx, yellow 3xx, red 4xx/5xx)
• Timing — Round-trip duration (e.g., "142ms")

Understanding Trace Types

Each trace category shows a different layer of the Salesforce API stack. Knowing which type to look at helps you debug faster. Internal Salesforce telemetry and service-component traffic is automatically filtered out.

Reading Trace Details

Click any trace row to expand the detail pane and inspect the complete request and response. This is where you diagnose what went wrong or verify that data was fetched correctly.

Header Metadata

• Type badge — Apex, UI API, GraphQL, Fetch/API (color-coded)
• Timestamp — When the call was made (browser local time)
• Duration — Round-trip time in milliseconds
• Triggered by — Component name that initiated the call
• Status — HTTP code with colored indicator

Request Section

Shows the HTTP method (GET, POST, PATCH), endpoint path, and request body. For Apex calls, shows the class and method name. JSON bodies are formatted and syntax-highlighted for easy reading.

Response Section

Displays the full response payload with status code and body. If the response is JSON, it's formatted with syntax highlighting and proper indentation. Error responses are highlighted in red with the error message summarized.

Record ID Navigation

Salesforce record IDs in responses appear as clickable links. Click any ID to open the Records tab and load that record. A breadcrumb trail tracks your navigation path, allowing you to backtrack through related records.

LMS Monitoring (Beta)

The Lightning Message Service (LMS) is a publish-subscribe system for inter-component communication. LWC Explorer lets you discover channels on a page, subscribe to monitor activity, and publish test messages—all without writing code.

Core LMS Features

• Channel discovery — Auto-scans the page for LMS channels in use by components
• Subscribe/Unsubscribe — Toggle subscriptions to monitor which messages flow through each channel
• Publish test messages — Send test payloads to a channel to verify subscribers receive and handle them correctly
• Schema inspection — View the expected message structure for each channel
• Activity feed — Real-time log of all messages published to subscribed channels

LMS Status Indicator

The top of the LMS detail pane displays a status pill with one of three states:

• Ready (green dot) — LMS bridge is active and channels are discoverable
• Unavailable (gray dot) — LMS is not available or not enabled in this org
• Not Connected (red dot) — Connection to the LMS bridge was lost (try refreshing)

LMS Discovery Limitations

Not all channels may be discoverable—it depends on how they're defined and initialized in your org. If channels don't appear:

• Refresh the page and click Refresh Tree in the LWC Explorer header
• Verify that the page contains components that actually use LMS
• Check the Errors filter—connection issues are logged there

Panel Position & Docking

LWC Explorer can dock to the right or bottom edge of the page. Your choice depends on screen size and whether you prefer vertical or horizontal layout.

Position Options

• Right (default) — Side panel. Good for widescreen monitors where you have horizontal space to spare.
• Bottom — Horizontal panel. Better on smaller screens or when you want the full page width visible while debugging.

Changing Position

Click the dock toggle button in the LWC Explorer header to switch between Right and Bottom. Your preference is saved automatically and persists across sessions and page reloads.

Tips & Debugging Workflows

Performance Bottleneck Analysis

• Perform an action on the page (e.g., click a button, submit a form). Open LWC Explorer and click Live Mode to capture the resulting traffic.
• Filter by Apex and sort by timing. Any call over 500ms is a candidate for optimization—investigate the Apex logic first.
• Check Errors filter—failed requests can cause cascading retries and slow down the entire interaction.
• Use Collapse All to focus on a single component and its direct traces, reducing visual noise.

Component Behavior Verification

• Click Pick Component, then hover over a UI element to instantly select it in the tree. No tree navigation needed.
• Search the component tree by name to find components quickly across deep hierarchies.
• Once selected, related traces appear automatically on the right—no extra clicking to correlate component behavior with API calls.
• Use Highlight to visually mark the component on the page and confirm you're looking at the right thing.

Data & Integration Debugging

• Click any record ID link in a trace response to load that record in the Records tab with breadcrumbs for backtracking.
• Review UI API responses and check the fields object to see exactly what data was returned to the component.
• Use Errors filter to isolate failures instantly. Check the status code and error message to determine root cause (permission, data, network, etc.).
• Export trace details to share with team members or keep as documentation.

LMS Channel Debugging

• If LMS shows Unavailable, refresh the page and click Refresh Tree. If still unavailable, your org may not have LMS enabled.
• Use the Publish form to send a test message to a channel. If subscribers respond, integration is working correctly.
• Watch the Activity Feed in real-time to verify that two components are communicating over a channel. This is the fastest way to debug inter-component messaging.
• Subscribe to a channel to monitor activity—unsubscribe to reduce noise if you're focusing on a different component.