Debug Your Components with Virtual Device Builds

To debug your components, connect your desktop browsers to the Salesforce mobile app running on your virtual devices. Then use Safari (iOS) or Chrome (Android) developer tools to view and interact with HTML markup, step through JavaScript code, and see console logging and error messages.

You can debug the web-based code of your component, but you can’t debug the platform native code of the mobile app.

Note

Virtual device builds of the Salesforce mobile app let you preview your mobile Lightning web components on a wide range of simulated Android and iOS devices. To install a build into a simulated device, see Preview Components in the Salesforce Mobile App.

Debug on iOS Using Safari Developer Tools

To verify your component when running on iOS, use Safari Web Inspector.

To enable Safari’s developer tools, including Web Inspector, follow these steps.

On your desktop development machine, open the Safari browser.
Select Safari | Preferences….
Select Advanced.
Enable Show Develop menu in menu bar.

Safari developer tools are located in the Develop menu, and are active until you turn them off by reversing the preceding steps.

To debug a mobile component, connect your desktop instance of Safari to the Salesforce mobile app running on your virtual device.

On your desktop development machine, select Safari | Develop | Simulator — device — version, where device is the simulated hardware, and version is the operating system installed on it. For example, Simulator — iPhone 11 Pro — iOS 13.3 (17C45).
Select Automatically Show Web Inspector for JSContexts.

When you interact with your component in the simulated device, a new Web Inspector window opens. Use Web Inspector to debug your component in much the same way you debug it when it’s running directly in Safari on your desktop.

To learn more about using Safari Web Inspector, see webkit.org/web-inspector/enabling-web-inspector/.

Debug on Android Using Chrome DevTools

To debug your components when running on Android, use Chrome DevTools. First, enable Developer Mode on your emulated device.

On your emulated Android device, open Settings | About Emulated Device.
Scroll down to the build number. To enable Developer Mode, click the build number seven times. You see the message “You are now a developer!”
Return to the home screen, and open the Salesforce mobile app. Navigate to a page where your component is displayed.

To debug a mobile component, connect your desktop instance of Google Chrome to the Salesforce mobile app running on your virtual device.

In Chrome on your desktop development machine, enter this URL into the location bar: chrome://inspect/#devices.
You see a list of available remote debugging targets with names similar to “Android SDK built for x86_64 #EMULATOR-5554”.
Find the item for your active emulated device. Under the Remote Target item, click inspect.

Chrome opens a remote debugging window. On the left is the current webview in the Android emulator, which is the page holding your mobile component. On the right is Chrome DevTools, which you can use to debug your component as if it were running in Chrome on your desktop.

To learn more about using Chrome DevTools, see developers.google.com/web/tools/chrome-devtools/remote-debugging.

See Also