How to Run and Debug Salesforce Mobile App on the desktop? (reloaded 3rd time and many years later...)

Question

I was struggling with mobile development from day one of Lightning Experience and the Saleforce Mobile app. Always I felt a huge pain and gave up mobile development and put my focus on desktop, because it was so painful.

But there are requirements coming back over and over again. I need to debug some layout-mess which works fine on desktop but not so on Android Mobile App and even less on iPhone Mobile App.

Running the Aura Compo in the Salesforce App I need to kill the App 2 times to force it to reload my Lightning Aura Component. Spending more time for killing/reloading than for the actual work. This can't be the way how Salesforce want us to debug mobile.

Phil W stated in his comment: "I think Salesforce's whole UA string approach and lack of standard mobile browser support is a bad decision on their behalf." I second that! In fact the missing mobile browser support and blocking of running the Mobile App just in a desktop-browser is causing HUGE development pain. Why Salesforce has done that? Such a bad decision! This is wasting huge development resources for nothing.

I found that all older simulators died after Salesforce retired the mobile web experience with the Summer '20 release. You can read more on this: My salesforce simulator is not working properly for salesforce1 it is showing me classic view

I want to debug

• without running the Salesforce Mobile App (or make it more developer friendly)
• running Lightning Aura Components on Record Pages and App Pages
• testing for Android Mobile App (Phones and Tablets)
• testing for iOS Mobile App (Phones and Pad)
• developing on Windows 11 (running Windows on MacBook Pro, but would prefer NOT to boot MAC OS and stay in Windows!)

Now a quick research brought up:

• https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.mobile_extensions_debug_components
• https://developer.salesforce.com/tools/mobile-debugging

What is the best path to follow on this "trail" to the "mobile heaven"? How to proceed with this "journey"?

APPENDIX

This question is NOT about a specific CSS issue. It is far more general on how to debug the Mobile App. Just to give you an impression of the kind of issues we are facing, see the screenshots below.

We've designed the Aura Compo on Desktop Google Chrome:

On Android App it looks surprisingly good:

But on the iPhone the sh** hits the fan... The button-sizes are just FUBAR and I have no clue, why they come partially so big:

There are other issues, too. But the inspection of the buttons I would like to take as a use case explanation for this questions.

To fix this, there is no huge budget. I want an quick and easy solution to inspect, test and debug stuff for Apple Phones. I would love to get an inspector like the F12-Developer-Tools in Chrome-Desktop to see which CSS is applied or overridden.

Answer 1

As it stands, all you need to debug and inspect Aura Components for iPhone is somehow in the documentation. I will wrap up how I was able to get a CSS inspector. My steps are from the perspective of a Windows user. As a Mac Developer, you might find most of my steps not worth to mention, self explanatory and crystal clear. For me it was not and it took me some time.

1. You probably need a Mac in hardware. As far as I see, on Windows it is NOT possible at all. Maybe a Hackintosh or a virtualization might do.
2. Boot MacOS (at the time of writing, I did it on MacOS 12 on a MBP 2018)
3. Find the right XCode for your MacOS. This step sucked for me. Could not use the default download. I googled how to get an older version for MacOS 12. I needed 13.4.1. XCode needs to match to you MacOS
   • Caution: I had difficulties to run the latest Version of XCode on a MacMini M2 2023. Read here if you encounter issues and want to know how I was able to solve them.
4. Download an .xip file, extract. I needed >30 GB for this.
5. Once extracted, I got an XCode.app
6. Run it
7. I create a dummy project for iPhone. I just picked SwiftUI and called it test1. Don't care about it, you don't need it later
8. It created a sample "hello world" app. I pressed the run button on the top
9. Now the simulator opened. that is the app you really need. I configured in the dock to keep it in the dock.
10. Now you can close and forget about XCode. For good.
11. In the Simulator app go to File > Open Simulator
12. choose the device you like (iPicked iPhone SE)
13. it starts and you will see an iPhone booting
14. don't waste you time looking for the App Store to install Salesforce. There is no App Store on Simulator
15. Instead go here on the Mac (not in the simulator) https://developer.salesforce.com/tools/mobile-debugging
16. Download it for iOS
17. you will get a .zip
18. extract it and you will get an .app
19. in my case I got a Chatter.app (which is kind of a Salesforce mobile app)
20. drag and drop that .app file to the Simulator window where you see iOS
21. this will install a mobile app called "Salesforce"
22. open Safari on the Mac (not on iOS!)
23. in the Menu, go Safari > Preferences.. there activate the last checkbox "Show Develop Menu in menu bar"
24. in Safari a new Develop menu appears. There in the top I found my Simulator device. In the submenu of it I found a "bridge.app" prefixed by the URL of my developer org
25. and finally the inspector opened

What is still bad?

• the most awful and annoying issue is, that you need to refresh 2 or more times after you have changed an Aura Components source code to get the newest code used in the app
• likely there is some caching going on which sucks a lot
• to clear this issue, I've asked a different question here: What is the fastes way to completely reload an Aura Component during debugging for iPhones after code changes? How to avoid any caching?
• overall the handling of the Safari dev tools feels sluggish and slow compared to their counterparts in Chrome. Especially the crosshair to pick an element for inspection feels worse than the "Inspect" mechanism on Chrome.
• also bad is the huge effort for something small. I have no need of XCode or deep mobile app development. All I need is an CSS inspector.
• the scrolling on phones in the simulator is not possible with 2 fingers. I had to setup 3 finger scrolling as described here: https://support.apple.com/en-us/HT204609

what is good?

• finally I can test almost all devices from Apple without having the hardware
• doing it with the simulator is faster than using hardware

Answer 2

We implemented our own app, using React Native, without using the Salesforce SDKs. This has some pros and cons.

Some cons are that we do not support using Smart Stores (for offline) or Salesforce's mobile push notifications and require a (community or other) user license for login. However, we have our own offline mechanism, support multi-org concurrent login (showing an aggregated view of data from multiple orgs), and use Firebase push notifications that are generated using platform events on the org (which are then handled to perform a callout to Firebase).

We use OAuth for authentication, and leverage "Universal Links" (aka Deep Linking) to make it easy to connect the app to a given org - the link can be embedded in a digital experience page, an email or normal web page (for example). We use the Salesforce frontdoor mechanism to bridge a REST API session through to one for use in an embedded web view.

To use embedded web view, for online only extensions to the app, we found we had to "hack" the web view's user agent string to match the SDK's hacked user agent string, but otherwise this works fine.

Debugging is then using standard options in our IDE (IntelliJ IDEA), at least the Android version. To debug iOS you probably have to use macOS and Xcode (and that's certainly necessary to use to generate the IPA).