--- schema_version: "1" id: 605a1a6910a506e818653567df13a56de8b268165444199f5210ed718b5fa8fd title: Debug with Lightning Web Security Enabled collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/lightning-components-security/guides/lws/lws-debug.md canonical_url: https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-debug.html source_site: developer.salesforce.com content_type: documentation content_hash: dac2e5a3b895fcb0d3f15bcf50acc12cd64e078280271d75e4f504e2d969caf0 products: - Security for Lightning Components - lwc --- # Debug with Lightning Web Security Enabled To debug Lightning components in an org where Lightning Web Security (LWS) is enabled, first [enable debug mode](/docs/platform/lwc/guide/debug-mode-enable.html). With [debug mode](/docs/platform/lwc/guide/debug-debug-mode.html), JavaScript code is easier to read because it isn’t optimized or minified. Debug mode also adds more detailed output for some warnings and errors. To inspect your client-side code, we recommend using [Chrome DevTools](https://developer.chrome.com/docs/devtools/). To open DevTools on Windows and Linux, press Control-Shift-I in your Google Chrome browser. On Mac, press Option-Command-I. ## Source Code Location for LWC Debugging Under LWS 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 the [Find Your Code in the Sources Panel](/docs/platform/lwc/guide/debug-dev-tools.html#find-your-code-in-the-sources-panel) section of the _Lightning Web Components Developer Guide_. The location is the same regardless of 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](https://developer.salesforce.com/media/debug_source_debug_mode_lws.png) 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. **tip:** 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](https://developer.salesforce.com/media/debug_reveal_sidebar.png) ## Source Code Location for Aura Component Debugging Under LWS 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](https://developer.salesforce.com/media/lws_aura_debug.png) ## Console Stack Traces The stack trace 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](https://developer.salesforce.com/media/debug_lws_stack_trace.png) To see filtered stack traces, enable custom formatters as described the [Enable Custom Formatters](/docs/platform/lwc/guide/debug-dev-tools.html#enable-custom-formatters) section of the _Lightning Web Components Developer Guide_. ## Console Messages 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 the [Enable Custom Formatters](/docs/platform/lwc/guide/debug-dev-tools.html#enable-custom-formatters) section of the _Lightning Web Components Developer Guide_. **note:** 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** - [Limitations for Debugging with LWS Enabled](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-debug-limitations.md) - [_Lightning Web Components Developer Guide_: Debug Lightning Web Components](/docs/platform/lwc/guide/debug-intro.html) - [_Lightning Web Components Developer Guide_: Debug Using Chrome DevTools](/docs/platform/lwc/guide/debug-dev-tools.html) - [_Lightning Aura Components Developer Guide_: Debugging](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/debug_intro.htm)