Enable debug mode for Lightning Web Components: Debugging Lightning Web Components (LWC) in Salesforce can be frustrating when everything is minified and unreadable. That’s where Debug Mode comes in — a powerful feature that gives you readable JavaScript, meaningful variable names, and full control over breakpoints and stack traces using your browser’s DevTools.
Enable debug mode for Lightning Web Components
In this post, we’ll walk you through what Debug Mode does, how to enable it, and why it makes a massive difference when working with LWC.
Why Enable Debug Mode?
By default, Salesforce minifies all LWC JavaScript to improve performance. This means:
- Your source code is compressed into a single-line mess.
- Variable and function names are shortened.
- Debugging becomes nearly impossible.
Without Debug Mode:
- Minified JS: All variables are compressed into meaningless names.
- No breakpoints: You can’t easily pause execution to inspect data or debug flow.
Here’s what it looks like in Chrome DevTools when Debug Mode is off:
It’s hard to read, right?
How to Enable Debug Mode for LWC?
Enabling Debug Mode is easy and only takes a few seconds:
Steps:
- Go to Setup in Salesforce.
- Search for “Debug Mode” in the Quick Find box.
- Open the Debug Mode settings.
- Check the box next to your user.
- Click Save.
That’s it! Now Salesforce will serve unminified JavaScript for your components.
Also Learn: How to do polling in LWC?
With Debug Mode Enabled
Once Debug Mode is turned on, your LWC code becomes readable and debuggable:
- Original function and variable names are visible.
- You can use debugger; statements or manually add breakpoints in DevTools.
- Stack traces are meaningful and traceable.
You’ll also notice a key difference in the Sources tab in Chrome DevTools.
File Structure in DevTools:
Without Debug Mode:
- Only see components/selector/selector.js → Minified and unreadable
With Debug Mode:
- Also see modules/c/selector/selector.js → Readable, usable for breakpoints
Note:
While the components/ file shows the original code, Salesforce executes code from the modules/ file. So, if you want breakpoints to work properly, place them in the modules version.
Important Note on Performance
Enabling Debug Mode does affect performance:
- Larger file sizes = slower load times
- Not suitable for use in production or with real users
Only enable Debug Mode when actively debugging a component, and disable it when done.
Conclusion
Debug Mode for Lightning Web Components is a must-have tool when troubleshooting complex issues. It turns Salesforce’s optimized black-box JS into readable, developer-friendly code — giving you full control over your debugging workflow.
Turn it on when needed, set breakpoints in the right place, and ship better code, faster.
