LWC - Debugging using devtools [duplicate]

Question

I am new to writing LWC's. I am good with APEX and Visualforce but I am trying to debug Javascript. More specifically right now i am trying to Trouble Shoot Quick Actions that is a LWC. I seen that the best way to do it is devtools through Google Chrome however when I do Ctrl shift I am not sure where to find my code on the page.

Answer 1

There's a good blog post on debugging your LWC components that the below info is all taken from. I'll include the video walkthrough which is easy to follow along with and only 7 minutes long.

In general, you'll open up the Chrome DevTools (or similar in other browsers). You can do this by

1. Right clicking on the page and selecting Inspect. There's two modes to consider
2. CTRL + Shift + C (windows) OR Command+Option+C(Mac)
3. F12

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.

1. Production mode

This is what you experience out of the box when using Salesforce. The important things related to debugging LWC in this mode is minified javascript and proxied values.

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

that we compress JavaScript into as few bytes as possible by removing any unnecessary characters and elements like line breaks, whitespace, tabs, code comments and so forth. This reduces the overall traffic that’s required for sending a file to a browser. Minifaction also changes the names of functions or variables, for example const mySuperVariable can become const d

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.

2. 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 Enable.

Once this is on, you have access to:

• unminified javascript
• Custom formatting
• Developer mode console warnings

That makes what I highlighted above easier to follow along with (you'll see your javascript as written, you won't see proxy object in Chrome). The other added benefit are the LWC engine 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.