3

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:

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:

enter image description here

On Android App it looks surprisingly good:

enter image description here

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:

enter image description here

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.

2 Answers 2

3

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

enter image description here

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
1
  • Glad to see you got it working. Sounds annoying that caching and other issues mean lots of wasted time re-starting.
    – Phil W
    Aug 18, 2023 at 15:25
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).

8
  • sounds like total overkill just to fix some CSS issues for the standard Salesforce Mobile App... could I use such a WebView easily? I like hacked approaches. So it is all about the User Agent String to make the Mobile-App run in any WebKit Browser? How can I find such a User-Agent-String an how can I make Chrome to fake-use that string? This would already help a bit
    – Uwe Heim
    Jun 7, 2023 at 17:10
  • likely even with Safari it would work in a similar way. The whole Mobile App is also only a Web Page. Salesforce is just refusing to let it render in a regular browser. Which is very bad for my taste. Need no offline nor other special features. Just want to fix CSS
    – Uwe Heim
    Jun 7, 2023 at 17:11
  • Overkill maybe for your needs - exactly what we needed. Changing the user agent string for a mobile browser is probably not easy (read probably not possible without building your own version), but to do in an app that simply uses an embedded Web View is straight forward. Personally, I think Salesforce's whole UA string approach and lack of standard mobile browser support is a bad decision on their behalf.
    – Phil W
    Jun 7, 2023 at 17:24
  • ^^^ This Is The Way (tm) if you have developer resources and funding but to be fair it's not the answer to Uwe's question. The answer is to use one of commercial mobile emulator SaaS platforms but that is largely off-topic and caveat emptor.
    – identigral
    Jun 7, 2023 at 18:26
  • An app that is equivalent to a mobile browser, but using a Web View with a hacked UA string is, fundamentally, enough. You may need to bake in how the user accesses the required Salesforce org(s) or provide a URL input.
    – Phil W
    Jun 7, 2023 at 18:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .