Workaround for Issue Debugging LWC in Chrome Dev Tools After Winter 2023

 🤯 This weekend, I discovered an issue trying to debug a Lightning Web Component in the Chrome debugger tools.

UPDATE on 11/13/2022: Salesforce includes a way to automatically disable LWS for your scratch orgs through the security settings in your config/project-scratch-def.json file. You will simply need to add a sessionSetting for lockerServiceNext set to false. Instructions below show you how to do this through Setup. Thanks to Grzegorz Skaruz for pointing this out.

Sharing this, in case anyone becomes as baffled and frustrated as I was. The issue involves the fact that Lightning Web Security (LWS) was installed by default in all orgs with Winter 23. I am not bashing LWS, because I think it is cool and very much needed.

But, for scratch orgs? Not so much.

If you try to debug JavaScript in a scratch org using the Chrome Debugger, you will no longer see the components listed in the page hierarchy under the Sources tab (like you may be used to doing).

To still debug your LWC’s, you will need to first disable this feature in your scratch org. You can do this in:

Session Settings -> Uncheck “Use Lightning Web Security for Lightning Web Components”. Click Save.

Unfortunately, it is still hard to see where to go in Chrome Debugger. But, you expand the c subfolder under components (see image below).

Chrome Debugger After LWC Disabled in Scratch Org

Good luck and if you find a better way to do this, please leave a comment below to help others.