Debug Components in an Org With LWS Enabled

When you debug Lightning web components in an org that’s enabled to use Lightning Web Security, you notice a few differences compared to orgs where it’s not enabled.

First, ensure to enable debug mode for the best debugging experience.

Debugging techniques are generally the same for code sandboxed by LWS, but let’s walk through a few differences.

Beginning in Winter '24, as you debug Lightning web components with Chrome DevTools, your component source code is displayed in the Sources panel inside the lightning/n/modules folder. This location is described in Find Your Code in the Sources Panel. The location is the same whether Lightning Locker or LWS is enabled.

Previously, when your Lightning web components ran in an org where Lightning Web Security was enabled, a special lws folder separately organized your component files under a namespace folder.

Source files in Page pane

Here you see the c namespace and its components on the current page. The compositionBasics.js file with LWS enabled is shown with source mapping.

Source mapping enables the sandboxed code to appear similar to your components’ original source code. You can inspect it, use breakpoints, and so on. You must enable debug mode to see the source mapping and to enable breakpoints.

If the code in the Sources panel doesn’t look like your original source code, make sure the setting Enable JavaScript source maps in Chrome DevTools is enabled. It’s enabled by default.

You can also find the source file in the Page pane when you’re already in the debugger. Right-click and select Reveal in sidebar.

Here the debugger stopped in compositionContactSearch.js, but the file is not selected in the sidebar. When you select Reveal in sidebar, the correct file is selected.

Context menu with Reveal in sidebar option

When you’re debugging Aura components, the source code is displayed in the Sources panel in the lightning/n/components subfolder inside a folder named for the org.

The lightning/n/components folder’s exact location can vary between browsers and sessions, and is also dependent on how you use the component. If you don’t see the folder right away, expand the nodes until you find it.

This example shows the Aura Interop component from lwc-recipes. The top folder name Aura_Interoperability matches the name of the Lightning page that contains the component. The highlighted file is used for debugging.

Aura source file used for debugging

The stack trace display in the Console filters out LWS calls to give you a clearer picture of errors in your components. The LWS calls are contained in their own folder (1).

LWS folder in console

To see filtered stack traces, enable custom formatters as described in Enable Custom Formatters.

Console messages show information about LWS in console methods such as console.warn and console.info. For example, console.warn is called when an object mutation is tracked on one side of the sandbox and not the other.

To see LWS console messages, enable custom formatters as described in Enable Custom Formatters.

LWS changes the source code line number and source code file for console messages. Console messages appear to come from the Salesforce aura_proddebug.js file instead of from the component’s JavaScript file that logs the message. This behavior is a known issue that is due to browser implementations so we’re waiting for browser vendors to implement a fix.

See Also