In general, you'll open up the Chrome DevTools (or similar in other browsers). You can do this by
- Right clicking on the page and selecting
Inspect. There's two modes to consider
- CTRL + Shift + C (windows) OR Command+Option+C(Mac)
Now that it's open, there's two different modes that serve the LWC to the browser that change what/how info is presented to you.
- Production mode
You can still see the source code in a certain form by going to
Sources tab and finding your module (as shown below) - but, the minification means
You can click on
pretty print to get some sort of code formatting and the code is already debuggable - set breakpoints, inspect values during runtime, and work with the debugged values.
Proxied values - Salesforce proxy certain things (ex. data provisioned via decorators) so you'll only see the Proxy object and you either have to use something like
JSON.stringify() in ChromeDevTools (in
console tab) or inspect the object structure itself. While on the
Sources tab, you can press
esc to have the
console drawer show up (if you want to see both without having to switch) where you can input
JSON.stringify() on the variables in question. Otherwise, you can manually click within the proxied object returned in the console.
- Debug Mode
You have to enable this yourself.
Setup --> Debug Mode Users. Click the checkbox next to your user or whoever you're testing as. Click
Once this is on, you have access to:
- Custom formatting
- Developer mode console warnings
In debug mode the Lightning Web Components engine actually identifies bad patterns that are only detectable during runtime, and then prints them as console warnings.