Table of Contents
So the question is How To Inspect Element on iPhone…
If you’re developing or ever developed, mobile responsive site, you know the importance of an inspection tool. Especially if you’re developing it for iOS, as it is known for its optimization.
So, in that regard, you have 3 ways to inspect elements on iPhone or iPad.
#1. Inspect Element on iPhone Safari
This method is given by Apple, especially for web developers.
1) You need Apple’s Mac for it, you can’t operate it on Windows.
2) So, First, you’ve to plug in your iPhone/iPad, to your Mac.
3) Then, you have to open the website on your iPhone’s Safari, that you want to inspect.
4) Now, go to your Mac, and open Safari there, here you have to enable the developer menu.
5) You can enable the developer menu by going to Safari in your Mac, then Preferences, then Advanced.
6) Here check that box, that shows “Show Develop Menu in the Menu Bar.”
This will enable the developer menu for you.
After enabling the developer menu, you’ll see the new developer option, in the top menu bar.
If after connecting with Mac also, your iPhone isn’t inspecting, it means your web inspector is off on your iPhone. You’ve to enable to use the inspection tool on Mac.
1) To enable Web Inspector on your iPhone, go to Settings and search Safari, tap on Safari, and Scroll down at last to Advance. There you have to enable Web Inspector.
2) Click on that developer option, and select your iPhone there in the drop-down list. There it will show you the page, you’ve opened on your iPhone.
3) Tap on it, and that’s how you open inspect element on iPhone or iPad.
4) Highlight the code in your Mac, and it will also be highlighted on your iPhone, This will also make your inspection a lot easier.
#2. Inspect Element on iPhone Without Computer
You can inspect the webpage on your iPhone also.
Of course, it won’t be that convenient or professional, but you can inspect on iPhone Safari without Computer.
There are two ways of inspection also, first is Apple’s Official Method, not that good, you can just edit the webpage.
By using Shortcut App to inspect, see this video to know more – YouTube Video
Another method is to use a third-party app from App Store.
For this article, I will use Web Inspector, it’s not a recommendation.
Steps to Inspect Element on iPhone Without Using the Computer
1) On your iPhone, Just Hover to Settings – Search Safari.
2) In Safari, Scroll down and Select Extensions, Click on More Extensions.
3) After that, You’ll be redirected to App Store, From there Download Web Inspector.
4) After Downloading, Click on Open – then tap on Go to Setting.
5) In settings, ON Web Inspector and Give them Permission, Click on Allow.
6) Great! In your Safari Browser, Tap on the Extension-like icon, near the web address.
7) Click on Web Inspector!
8) From now on you can inspect any page or website from your iPhone directly without using the computer.
Web Inspector, won’t take your data, as mentioned on App Store. Till now, I found Web Inspect Extension on Safari best method to inspect elements on iPhone without Computer.
Related Blogs – To learn how to enable JavaScript on your browser(Opens in a new browser tab)
#3. Inspect Element on iPhone with Third Party
Third-Party Apps, Websites and Extensions, has made inspecting a lot easier.
You can easily download any third-party app or extension from App Store.
For Example, if you have a Windows PC, but want to debug iOS Devices, then you can download any third-party app for iOS debugging.
Websites, like Browser Stack, also help you to inspect elements in iPhone from Windows.
You can sign up at browser stack from here.
Note – This isn’t a recommendation…
I hope this blog was informative, thanks for reading!
See Also…
5 Steps to set Google as your Homepage on Mac(Opens in a new browser tab)
How to copy text from protected website(Opens in a new browser tab)
