How to Debug iOS Elements without a Mac and/or iOS device?
Is a Mac and an iPhone too expensive for developing and debugging your applications? Here's what you can do for FREE starting right now.
If you're into Web Development and try to debug elements without a Mac, it's going to be tricky.
The main reason being is that the Apple Ecosystem is generally a closed one.
Furthermore, if you're a test automation engineer who's looking to run selenium tests on an iOS Safari, this can be a challenge without the use of a Mac or iPhone / iPad.
Nonetheless, here are some ideas you can certainly try to make the most use of it.
The main problem I often encounter when using iOS Safari is that the browser switches between web and native elements.
Sometimes, when you find an element using Id or CSS Selector, it works. Other times, it won't and if you try to locate it, you see it using native elements such as XCUIElementType. Even so, there's no guarantee which one is going to work.
Disclaimer: I haven't used a Mac system in my current role to consistently check this as my organisation uses primarily Windows machines.
Cloud Platforms
You can use Cloud Platforms such as BrowserStack to launch your websites or even apps on real iOS devices. The free version can be enough to debug a few tests, however, the cost is certainly high if that's something you want to consider.
At work, we have official licenses for using this platform. Writing automated tests for Android and iOS devices, I usually use the App Live feature or Appium Inspector to get the elements locators.
However, this is absent when you use the Live feature. In Safari, to get the locators of the web page, you can use the default Web Developer tool or debug mode, which in my opinion is not reliable enough.
Therefore, a better solution is to enable to official Developer Mode for Safari. Nevertheless, I imagine for security reasons, BrowserStack doesn't give you complete access. The settings window when using an iPhone or iPad disappears within seconds, while you can only access Safari or Chrome when using a Mac.
Appium Inspector
Using Appium Inspector can be an effective way of getting elements' locators in both Web and Mobile applications. Unless you use platform services such as BrowserStack or SauceLabs, you need a Mac to emulate an iOS device and an actual iPhone or iPad though.
With the inspector connected to BrowserStack App Live mode, as I connect with an iOS device, the browser is loaded by default if you don't specify an application in the desired capability. The issue though i I don't see how to change the URL. Even the display looks small or broken.
As a problem solver, I try multiple ways to find a solution within a timebox. I first load any application so that I can select Safari and change the URL. I then tap on the home button in order to open the browser before changing the URL. Once the page loads, I can debug the elements using the Inspector tool.
This process can work but it's tedious and unreliable. Sometimes, you can't even open Safari without waiting endlessly before timeouts occur.
Driver Context
When you're debugging or writing automation tests for mobile apps, you can either switch to Web or Native elements depending on if the app uses Webview or not.
Nevertheless, even though Appium uses the WebDriver protocol, behind the hood, it's far more sophisticated and can target not only web applications, but mobile and desktop as well.
Selenium, however, can only manage a browser. It doesn't have the Driver Context feature.
Conclusion
The most effective way to develop and/or debug iOS Elements is using a Mac or an iOS mobile device.
Some cloud platforms such as BrowserStack and Inspect certainly help but the experience isn't close to a native one. Plus the licensing fees might be expensive.
They are more suited to manually testing your websites and applications rather than developing or debugging them.
Additional Resources
You can refer to the list of sources below:
Chris Coyier
