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"?
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.