Currently, Safari owns 18.43% of the global browser market, while iOS holds 26.47% of the global mobile operating system market. From these statistics, you can see how important it is for web developers to make responsive web apps and pages suitable for iPhones and the Safari browser.
Therefore, developers and testers have to inspect website elements on the iPhone-Safari duo so that they remain flawless and smooth.
Are you looking for how to inspect element on iPhones? This guide will help you to inspect definite web elements on the iPhone.
Thus, you, as a developer, will get to figure out the right solution to develop responsive web pages and more. Here’s how you can inspect web elements on an iPhone.
How to Inspect Element on iPhones?
Well, you can use the iPhone’s built-in features to inspect web elements. On the other hand, you can also use third-party apps to learn how to inspect element on iPhones.
Check out the following tried and tested methods to inspect and take a look at web elements:
- Use Safari’s Web Inspector
The first method regarding how to inspect element on iPhones is through Safari’s settings. You must use developer tools on your iPhone and connect the device to a Mac computer.
Here’s what you have to execute:
- Launch Settings on your iPhone.
- Scroll down until you can locate Safari and tap on it.
- Next, tap the Advanced option.
- After that, toggle on the Web Inspector option.
- Now, you have to go to your Mac and explore the Safari browser on your Mac computer. Simply click the Safari option next to the Apple icon from the upper-left corner of the screen.
- After that, hit the Preferences option from the context menu. Select the Advanced option from the navigation bar.
- Check the box next to the option that says, ‘Show Develop Menu in Menu Bar’.
- A Develop menu should appear on the top menu bar. Connect your iPhone to your Mac device with a compatible cable.
- Click on the develop option after you have connected the iPhone. Choose your iPhone from the list.
You should activate the ‘Connect Via Network’ option so that you can avoid the use of cable again and again. Now, you can disconnect the iPhone from the Mac device, and you must be able to view web elements without connecting your iPhone to the Mac computer.
However, you’re not done with the complete setup of how to inspect element on iPhones. Proceed with the following guidelines for a successful element inspection:
- Go back to your iPhone and open Safari. In addition, browse the website that you want to inspect.
- Afterwards, move over to the Mac computer and explore the Safari application.
- Click the Develop option from the menu bar and choose your iPhone.
- A list of web pages on your iPhone should appear on your Mac.
- Select the webpage that you need to examine.
- A window will appear on your Mac, and it will display all the elements that you want to inspect from that specific webpage.
Just click the element that you wish to inspect, and the info will be highlighted in blue.
Want to Save an Image while Inspecting Web Elements Using Safari?
Apart from how to inspect elements on iPhones, you might be eager to save an image with Safari. Well, you can do that by going through the following steps:
- With the element inspection window on your Mac computer, click the Sources option from the top navigation bar.
- Next, choose Images from the side panel.
- Right-click on the image that you need to save.
- After that, hit the Save File option.
Make sure that you assign a name to the file so that you can locate it easily whenever required.
- Using Adobe Edge
The above method of inspecting a website through a Mac might seem complicated. Additionally, you have to set up multiple devices at the same time. That’s why developers mostly prefer a third-party app to easily inspect web elements on iPhones.
Adobe Edge is one of the most used third-party services that developers trust. Adobe Edge Inspect doesn’t require a Mac computer to be connected to an iPhone. This will save you time and effort to a great extent.
However, Adobe discontinued the feature, but this is still available online. Therefore, the user should be responsible for security concerns or any kind of data breach. On the other hand, the service supports synchronised browsing.
Let’s check out how you can inspect elements on iPhones using Adobe Edge Inspect:
- Download the Adobe Edge Inspect software on the deployment system. Ensure that all the required devices that you want to test are connected to the same access point or Wi-Fi. The synchronisation among all devices takes place through the Wi-Fi connection.
- Now, explore the website that you want to inspect. The webpage should open up on all the devices participating in the test.
- Locate a debugging sign next to the device name.
- Click the debug sign for the device on which you want to inspect web elements.
Now, you have access to the required developer tools.
- Inspecting Web Elements Using Sauce Labs
Sauce Labs offers a dedicated service to inspect web elements on iPhones. However, you have to launch the website on your Mac computer.
Check out how to inspect element on iPhones using Sauce Labs:
- Sign up for a free licence on Sauce Labs. Next, sign into that particular account.
- Go to the Sauce Labs dashboard and select the Live option, followed by Mobile Apps.
- Choose the app under test from the App Selection window. After that, explore a virtual iOS simulator session.
- Afterwards, choose the iPhone that you want to inspect web elements on. Click the device menu to select the iPhone.
- Now, hit the Start Test button. Open up Dock on your Mac device and explore Safari.
- Head towards the Device menu and opt for the Restart option. This will restart the simulator and let you connect to Safari on the virtual system.
- Now, explore Safari on your iPhone and click the Safari browser on the virtual machine. Go to the Develop menu and select your iPhone from the list.
- This will enable the Web Inspector window.
Finally, you can notice Java, HTML, CSS, and other web elements.
Apart from the above-mentioned third-party services, some more apps and websites let you inspect and test web elements on iPhone and Safari. For example, you can try BrowserStack, LambdaTest, TestGrid, etc., and their dedicated services. Besides this, you can use temporary URLs, plugins, and more to inspect and test web elements on iPhones.
However, inspecting web elements is quite straightforward for Google Chrome. Unfortunately, it’s not that simple for iPhones or the Safari browser. If you’re into developing Safari-friendly webpages, then you have to learn how to inspect elements on iPhones, especially in Safari. So, what are you waiting for?