LWC Debugger

About

LWC Debugger – Chrome DevTools Extension for Salesforce Lightning

LWC Debugger is a Chrome DevTools extension purpose-built for Salesforce Lightning Web Components (LWC) developers. It adds a dedicated panel to Chrome DevTools, giving you real-time visibility into:

Apex (server) method calls made from LWC components
CustomEvent events fired by LWC components
The hierarchical structure of LWC components on the page
Features

Apex Call Tracking: Instantly see all Apex method calls from your LWCs, including method name, parameters, and server responses.
CustomEvent Monitoring: Capture and inspect all CustomEvent events dispatched by LWC components, with event names and payloads.
Component Tree Visualization: Explore the nested hierarchy of your LWC components, providing a clear map of your application's structure.
Tabbed DevTools Panel: Access “Apex Calls,” “Event Fire,” and "Component Tree" tabs directly in DevTools for seamless debugging.
Clear Logs/Events: Reset logs and event lists with a single click.
No Data Collection: All monitoring is local—no data is sent or stored externally.
Works on All Salesforce Lightning Pages: Supports all Salesforce orgs using Lightning Experience (.lightning.force.com, .salesforce.com).
Why Use LWC Debugger?

Boost Productivity: Instantly understand LWC-to-Apex, event flows, and component relationships.
Accelerate Debugging: Quickly pinpoint issues with server calls, event handling, or component structure.
Improve Code Quality: Gain deep insight into component interactions, data flow, and architectural design.
No Setup Required: Just install and start debugging—no code changes needed.
How to Install

Download or Clone the Extension:

Get the extension source code from the repository or your local files.
Load Unpacked Extension in Chrome:

Go to chrome://extensions.
Enable Developer mode (top right).
Click Load unpacked and select the extension folder.
Verify Installation:

The LWC Debugger icon will appear in your Chrome toolbar.
How to Use

Open a Salesforce Lightning Page:

Navigate to any Salesforce Lightning Experience page.
Open Chrome DevTools:

Right-click anywhere and select Inspect, or press Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows/Linux).
Switch to the “LWC Debugger” Tab:

In DevTools, find the new LWC Debugger tab.
Use the Apex Calls tab to view all Apex method calls, with request and response details.
Use the Event Fire tab to see all CustomEvent events fired by LWCs, with their payloads.
Use the Component Tree tab to visualize the nested structure of your LWC components on the current page.
Interact with Your App:

As you use your Lightning app, Apex calls, events, and the component tree will appear in real time (for the tree, it reflects the current state of rendered components).
Click any entry to expand and view full details.
Clear Logs/Events:

Use the Clear Logs or Clear Events button to reset the lists.
How to Uninstall

Go to chrome://extensions.
Find LWC Debugger.
Click Remove.
Privacy & Security

100% Local: All monitoring and data processing happens in your browser.
No Data Collection: The extension does not collect, transmit, or store any personal or organizational data.
Safe for All Salesforce Orgs: Use with confidence in any environment.
Troubleshooting

If you don’t see the LWC Debugger tab:
Make sure you’re on a Salesforce Lightning page.
Reload DevTools after installing the extension.
Ensure the extension is enabled in chrome://extensions.
Salesforce Chrome Extension, LWC Debugger, Apex Call Tracker, Lightning Web Components Debugging, Salesforce DevTools Extension, Apex Method Call Inspector, Salesforce Event Debugger, LWC Event Tracker, Salesforce Developer Tools, Lightning Experience Debugging, Salesforce Apex Debugger, CustomEvent Inspector, Salesforce Chrome DevTools, LWC Apex Debugging Extension, LWC Component Hierarchy, Salesforce Component Tree, Lightning Component Inspector

Contact & Support

For questions or feedback, email: [email protected]

Start Debugging Smarter Today!

Install LWC Debugger and supercharge your Salesforce Lightning development with real-time Apex call, event tracking, and component tree visualization—right inside Chrome DevTools!