Use Salesforce Mobile Developer Tools

Now that your developer tools are set up and handy, let’s learn how to use them. In this module, we only go over the iOS simulator, but using the Android emulator is the same process.

Before you begin, make sure that you’ve enabled the dev hub in your org and authorized your org local development. If you need help with setting up your org for local development, you can use this guide for help.

Use the Simulator with Visual Studio Code

As you develop your Lightning web component, you can quickly open it in a mobile simulator straight from Visual Studio Code.

1. Launch Visual Studio Code.
2. Click File | Open and open the project you created in the Quick Start: Lightning Web Components badge.
   Note: If you don’t have a project created, you can create one by selecting SFDX: Create a Project in the Visual Studio Code Command Palette and following the prompts.
3. Click View | Terminal to open VS Code’s integrated terminal if it’s not already visible.
4. Run the command sf plugins install @salesforce/lwc-dev-mobile to install the Salesforce Mobile Extensions Plugin. If you already have this plugin installed, there’s no need to reinstall it.
5. If you haven’t already done so, download the bikeCard component.
6. Unzip the file.
7. Drag the unzipped folder into the force-app/main/default/lwc folder of your project in Visual Studio Code.
8. In the Visual Studio Code explorer, right-click the bikeCard folder and select SFDX: Preview Component Locally.
9. Select Use iOS Simulator from the menu that pops up.
10. Select a device from the list of available simulators.

The Simulator app opens in a separate window and displays a preview of your Lightning web component.

Let’s change something in the component to see if the simulator can keep up with your development. For example, price is usually a significant factor in purchasing a bike, so let’s make that information stand out by making it green and bold.

1. In the CSS file, bikeCard.css, copy and paste the following code.

   .price {
       color: green;
       font-weight: bold;
   }

2. Save the file.
3. In the HTML file, bikeCard.html, add class="price" to the div containing the price.

   <template>
       <div>
           <div>Name: {name}</div>
           <div>Description: {description}</div>
           <lightning-badge label={material}></lightning-badge>
           <lightning-badge label={category}></lightning-badge>
           <div class="price">Price: {price}</div>
           <div><img src={pictureUrl}/></div>
       </div>
   </template>

4. Save the file.

Notice that the price is now green and bold in the simulator. You don’t even have to refresh the page—Salesforce automatically updates everything for you!

Use the Simulator with Desktop Lightning App Builder

You made updates to the price styling using Visual Studio Code that you can see in the simulator, but will you also see the changes in Lightning App Builder? The answer is yes! You only need to deploy your changes to your org and they’ll be there.

1. In Visual Studio Code, right-click the force-app/main/default/lwc/bikeCard Lightning component folder in the explorer and select SFDX: Deploy Source to Org.
2. In your org, from Setup, enter App Builder in the Quick Find box and select Lightning App Builder.
3. Click Edit next to the Bike App.

The bike card component now includes the updated price styling.

If you want to preview the component, use the SFDX: Preview Component Locally option in Visual Studio Code. When you use this option, the page opens a temporary browser page using localhost. To see the component in the Salesforce app, open the Salesforce app on the simulator and then go to your Lightning App to see how it looks.

When viewed on mobile, the list of available bikes makes the page too long, so let’s create a filter to reduce the number of available bikes displayed on a desktop. 

1. From Lightning App Builder, click the selector component (available bikes list component) in the preview window.
2. Click + Add Filter.
3. Under Field, Click Select.
4. Select Device, then Form Factor, then click Done.
5. Click Done.
6. Click Save.
7. From your iOS Simulator window, go to the Salesforce app and then to the Lightning App you edited. Then, pull down the page to refresh it.

The list is now gone from the mobile view but can still be used on desktop.

You can now test your Lightning web components on a simulator straight from your desktop, which is good news for both you and your users. Next, you learn how to debug your components on mobile using browser tools. 

We won’t check any of your setup. Click Verify Step to go to the next step in the project.

Resources

• Video: Build, Preview and Debug with Salesforce Mobile Tools
• Salesforce Developer: Install Mobile Extensions 
• Salesforce Developer: Preview Your Components from Visual Studio Code
• Salesforce Developer: Preview Your Components in the Salesforce Mobile App