Salesforce developers and administrators often need to quickly check the code behind a Lightning Web Component (LWC). Maybe you are auditing an org you inherited, troubleshooting a production issue, or simply trying to understand how a colleague built a feature. The Salesforce Developer Console is a familiar tool for viewing Apex classes, triggers, and Visualforce pages, but Lightning Web Components are not listed in its standard file menus. The good news is that you can still see LWC metadata and source code with a few clever techniques. This article explains how, step by step.
Why Work with AAMAX.CO on Your Digital Projects
Many organizations use Salesforce alongside public websites and custom web applications. AAMAX.CO is a full-service digital marketing company providing web development, digital marketing, and SEO services worldwide. Their team builds modern, component-driven websites and applications and understands how to connect front-end experiences with CRM and marketing platforms. They can create intuitive interfaces that capture leads, display customer data securely, and deliver excellent performance. If you need a team that can craft clean, conversion-focused website design that complements your Salesforce investment, they are a strong partner to consider.
Why LWC Does Not Show Up by Default
The Developer Console was created long before Lightning Web Components existed. Its Open Lightning Resources dialog was built for Aura bundles, which are stored as AuraDefinitionBundle metadata. Lightning Web Components are stored differently, as LightningComponentBundle and LightningComponentResource records. Because the console's file browser does not query those objects, your LWC bundles remain hidden in the standard menus. Salesforce's long-term direction is source-driven development in VS Code, so the console has not been extended for LWC editing.
Step-by-Step: Seeing LWC Using the Tooling API
The most reliable way to see Lightning Web Component code inside the Developer Console is through the Query Editor with the Tooling API enabled.
Step 1: Open the Developer Console
Click the gear icon in the top-right corner of Salesforce and select Developer Console. A new window will open.
Step 2: Enable the Tooling API
At the bottom of the console, open the Query Editor tab and tick the Use Tooling API checkbox. This allows you to query metadata objects rather than standard data records.
Step 3: List All LWC Bundles
Run the following query to see every Lightning Web Component in the org:
SELECT Id, DeveloperName, MasterLabel, ApiVersion, IsExposed FROM LightningComponentBundle
This returns the component names, labels, API versions, and whether each one is exposed to Lightning App Builder.
Step 4: View the Files in a Bundle
To see the actual files, query the resources:
SELECT FilePath, Format, Source FROM LightningComponentResource WHERE LightningComponentBundle.DeveloperName = 'myComponent'
The result shows each file path, such as the HTML template, JavaScript controller, CSS file, and metadata XML, along with its source content. You can copy the source into a text editor for easier reading.
Other Ways to See a Lightning Web Component
Setup Menu: Lightning Components
In Setup, search for Lightning Components under Custom Code. This page lists both Aura and LWC components. While you cannot edit LWC here, you can confirm that a component exists, see its type, and check its API version and namespace.
Lightning App Builder
To see how a component looks and behaves, open any Lightning record, home, or app page in Lightning App Builder. Exposed components appear under the Custom section of the components panel. You can drag a component onto the canvas to preview it and configure its design attributes.
Browser DevTools with Debug Mode
Enable Debug Mode for your user in Setup. Then load a page containing the component, open Chrome DevTools, and browse to the Sources panel. Under the lightning or modules directories, locate the c namespace folder to see readable JavaScript for your components. This lets you set breakpoints and inspect runtime state, which is invaluable when troubleshooting.
Salesforce Lightning Inspector
The Salesforce Lightning Inspector Chrome extension helps inspect component trees, events, and performance. While it was designed primarily for Aura, it remains helpful for understanding how components render on a page.
Editing vs Viewing: Know the Limits
The Developer Console approaches described above are best for viewing and auditing. To create or modify Lightning Web Components, use Visual Studio Code with the Salesforce Extension Pack and Salesforce CLI. Retrieve components from your org, edit them locally with full IntelliSense and linting, and deploy changes back. This workflow supports version control, team collaboration, and automated testing with Jest.
Troubleshooting Tips
- If the Tooling API query returns no rows, check that your user has the View All Data or Author Apex permission.
- For managed package components, source may be hidden or obfuscated to protect intellectual property.
- If a component is missing in App Builder, confirm the metadata file includes
isExposedand the correct targets. - Remember to disable Debug Mode afterward, since it slows page loads for your user.
Conclusion
Although Lightning Web Components do not appear in the Developer Console's standard file menus, you can still see them using Tooling API queries, the Setup menu, Lightning App Builder, and browser developer tools. These techniques make auditing and debugging much easier. For ongoing development, adopt VS Code and Salesforce CLI to enjoy a faster, more modern, and more collaborative workflow.
Want to publish a guest post on aamconsultants.org?
Place an order for a guest post or link insertion today.