How to inspect an element on iPhone
This article aims to explain two easy methods for inspecting elements on an iPhone.
Method 1: Using Safari developer tools to inspect elements on an actual device
Apple provides a very intuitive feature that enables web developers to debug and inspect web elements on actual iPads and iPhones. One just needs to connect their iPhone primarily to get started.
Note: This feature only works on the actual Apple Mac and not on Safari running on Windows.
One just needs to enable the “Show Develop menu in the menu bar”. The steps to do so are as follows:
- Open Safari browser
- Click on Safari > Preferences > Advanced
- Tick the checkbox Show Develop menu in the menu bar
Once done, the Develop menu will be enabled in the top-bar. Click on the Develop menu and it will show the connected iPhone in the options along with the web-page that is active on the connected device.
Click on that page and it will open the Web inspector window for the same page.
When you interact with any element in the web inspector, it immediately highlights that particular element on the iPhone in real-time. This helps developers identify exactly what they are inspecting as they continue to interact with the elements providing an interactive test experience.
Method 2: Using Cloud-based platforms for Live testing on real devices
A cloud-based platform allows web-developers to test their web apps instantly for cross browser compatibility across a range of devices. Also, a real device cloud enables developers or QAs to instantly run manual tests on real mobile and desktop devices. For extensive testing, QAs can also use Cloud Selenium Grid for automated cross browser testing on multiple real devices.
Developers also get instant access to Dev tools on both platforms (Android and iOS) during live testing. This allows developers to eliminate their testing pain points as they can instantly test websites across a variety of iOS devices like iPhone X, iPhone, iPhone 11 Pro, and many other earlier versions on desired browsers.
Also read: How to test mobile applications manually
It’s very important for web developers and QAs to be aware of techniques that can help them resolve critical UI bugs occurring on specific devices. The methods explained above will help them trace bugs quickly and ensure the faster release of optimized website
