Get Ready to Troubleshoot

Learning Objectives

After completing this unit, you'll be able to:

Explain the benefits of working with unminified code.
Demonstrate how to get unminified Lightning web components.
Locate Lightning web components JavaScript in DevTools.
Use Ignore List to focus on your code only.
Enable custom formatters for proxied decorators.

Lightning Web Components Have Unique JavaScript Challenges

Troubleshooting JavaScript is a skill of its own. Troubleshooting Lightning web components, built with JavaScript, takes that skill and builds on it. One of the first things you discover is that Lightning web components are compiled and minified. Minification makes them smaller and faster for the browser to load. But it also makes them challenging to troubleshoot. Minified code is especially hard to work with because line breaks are removed and variable names are changed.

Before You Begin

The developer tools in most browsers have similar features. We focus on Chrome DevTools in this module. Let's set up an environment so you can explore DevTools.

We assume that you have your Salesforce DX development environment set up, and that you're comfortable using it to create Lightning web components and deploy them to an org. If you're not familiar with this process yet, complete the Quick Start: Lightning Web Components project before you continue in this module.

Follow Along with Trail Together

Want to follow along with experts as you work through this step? Take a look at this video, part of the Trail Together series on Trailhead Live. You can find a link to the full session in the Resources section.

Set Up Your Troubleshooting Environment

First, you need to set up a Trailhead Playground with a couple of Lightning web components and prepare it for troubleshooting.

Ready to Get Hands-on with Lightning Web Components?

Create a new Trailhead Playground now to follow along and try out the steps in this module. Scroll to the bottom of this page, click the playground name, and then select Create Playground. It typically takes 3–4 minutes for Salesforce to create your Trailhead Playground. You also use the playground when it's time to complete the hands-on challenges.

Note

Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Enable Debug Mode

This one step makes troubleshooting code much easier. Although the Lightning web components are still compiled, with Debug Mode enabled in the org, they're not minified. So, the variable names remain the same and the general structure of the code remains, making it much easier to troubleshoot.

From Setup enter Debug Mode in the Quick Find box, and then select Debug Mode.
Check the box next to your user.
Click Enable.

Turn off Lightning Web Security

As a temporary workaround to work with breakpoints, turn off Lightning Web Security.

From Setup enter Session in the Quick Find box, and then select Session Settings.
Under Lightning Web Security, uncheck the box for Use Lightning Web Security for Lightning web components.
Click Save.

Perform an Empty Cache and Hard Reset

To ensure turning off Lighting Web Security takes effect, the browser cache needs to be cleared along with a hard reset of the browser.

Right-click in the browser window and select Inspect.
Right-click and select Empty Cache and Hard Reset.

Grab the Lightning Web Components from GitHub

Complete the instructions in the GitHub repo readme.
If you didn't already open the Solutions app in the Chrome browser, do that now.

Your environment is now ready to do some troubleshooting using the browser DevTools.

Check your understanding of key points from this section with these flashcards.

Read the question or term on each card, then click or tap the card to reveal the correct answer. Click the right-facing arrow to move to the next card, and the left-facing arrow to return to the previous card.

Open DevTools

Let's look at the Solutions app with the Chrome DevTools.

From the App Launcher () in your playground, find and open Solutions.
Right-click the browser window and select Inspect and then click the Sources tab.
There are several ways to open the DevTools in the Chrome browser.

From the menu click Customize and control Google Chrome ()| More tools | Developer tools select Sources.

Press F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (macOS).
DevTools contains the DevTools Menu (1) and, when the Sources tab is selected, the Sources panel, which contains:
- The File Navigator pane (2) lists all files requested from this web page.
- The Code Editor pane (3) displays files selected in the File Navigator.
- The JavaScript Debugging pane (4) contains the Breakpoint control toolbar and several tools you can use to inspect JavaScript.

The DevTools menu has several options that allow you to view different parts of the browser. In this module, we work mostly with Sources and Console.

DevTools menu showing Elements, Console, Sources, Network, Performance, and Memory tabs and the Settings, Customize, and Close icons.

Use the Elements panel to view and change the DOM and CSS.
Use the Console panel to read messages such as those created with console.log(), interact with variables, and run JavaScript.
Use the Sources panel to view and debug JavaScript files.

Change the Location of DevTools

By default, the tools are docked to the right side of the screen. The tools can also be docked to the left or bottom of the screen or even undocked into a separate window.

Click Customize and control DevTools ( DevTools icon ) and select the dock side you want to use. (Images in this module show DevTools docked at the bottom.)

Dock side options buttons are Undock into separate window, Dock to left, Dock to bottom, and Dock to right.

Enable Custom Formatters

Lightning web components use JavaScript proxies to enforce that certain types of data are read-only, primarily data that's provisioned via decorators (@api, @track, @wire). In Debug Mode, custom formatters manipulate the proxies into readable parts. Then in Chrome DevTools, you see the real value instead of the proxy. Let's enable the custom formatters.

In DevTools, click Settings (). The Preferences page opens.
Under Console, select Enable custom formatters.

Use Ignore List

Ignore List lets you ignore selected JavaScript files when using DevTools, so that you only pause on your own exceptions. This allows you to ignore framework code that you don't want to troubleshoot.

In Settings, click Ignore List.
Click Add pattern.
Enter /aura_prod.*.js$ and then click Add.
Click Add pattern.
Enter /components/.*.js$ and then click Add.
Close Settings.

Locate the Lightning Web Components

Under Sources, the Lightning web components are displayed in the File Navigator (under Page). All of the custom Lightning web components for the current page are in the modules/c folder.

In DevTools, click the Sources tab.
In the File Navigator, under Page, expand lightning/n and then modules/c.
Click display.js. The file opens in the Code Editor.
In display.js find class Display. (Click inside the Code window and press Ctrl+F (Windows) or Cmd+F (macOS). In the Find box, enter class Display.) Notice that the code is compiled, but not minified, so the variable names are not changed.

If you see only a few lines of code in the JavaScript file, then Debug Mode is not enabled in the org. If enabling Debug Mode doesn't reset the code in the code editor, do a hard reload: With DevTools open, right-click the browser Reload button and then click Hard Reload.