Use Browser Tools to Help You Debug

Viewing and testing your Lightning web components on a simulated mobile device is a huge step forward in developing mobile-friendly components.

But what happens when you need to debug a tricky problem that only appears when your component runs on a mobile device? The great news is that you debug components on mobile the same way you do for desktop, using Safari Web Inspector and Google DevTools. The only difference is how you set it up.

Enable Debug Mode

The first step you need to do before using either browser developer tool is to enable debug mode in your Salesforce org for users.

1. From Setup, enter Debug Mode in the Quick Find box, then select Debug Mode.
2. In the user list, click the checkbox next to your user.
3. Click Enable.

Connect Safari Developer Tools

Next, connect the Safari Developer tools to your iOS simulator.

This currently only works with Big Sur+ and the Safari Technology Preview browser. 

1. Open Safari on your desktop.
2. Select Safari | Preferences.
3. Select Advanced.
4. Enable Show Develop menu in menu bar. Close the Preferences panel.
5. Select Develop | Simulator - device - version, where the simulator is the one where you opened the bikeCard Lightning web component.

A window appears containing the Safari Developer tools connected to your simulator.

Connect Chrome DevTools

And here’s how you set up Chrome DevTools with your Android emulator.

1. On your emulated Android device, open the Settings app.
2. Enter About emulated device into the search bar and click it.
3. Scroll to the bottom of the page and click Build number 7 times. The message “You are now a developer!” appears when you click it enough, which means that developer mode was successfully enabled for the emulator.
   
4. Return to the home screen, open the Salesforce mobile app and navigate to the bike Lightning web component.
5. Open Chrome on your desktop. In the location bar, enter chrome://inspect/#devices.
6. Click Inspect under the Remote Target emulator you’re working with.

A window appears containing your emulator with the Chrome DevTools connected to it.

With Visual Studio Code, the iOS simulator, the Android emulator, browser developer tools, and Lightning App Builder all working together, it’s super easy to view, interact with, test, and ensure your apps can work with mobile.

We won’t check any of your setup or changes. Click Verify Step to get your badge!

Resources

• Salesforce Developer: Enable Debug Mode in Salesforce
• Salesforce Developer: Debug Your Components with Virtual Device Builds