In case you don’t know, a webpage is made up of a slew of elements that are formatted to appear as one single entity. Web developers are required to understand each of these elements, how they’re laid out on a webpage, and see how each one of them work on their own.
Windows and Mac users would be familiar with the “Inspect” or “Inspect element” option that’s available when right-clicking on any webpage. What this option offers is a way to view a website’s source code, see all of its elements, the line of code behind each of them, and edit its Javascript, HTML, CSS, and all the other media files that are on it. This way, you not only get to learn how a particular website works and functions but make modifications to it on your own browser without them affecting the actual webpage.
Although inspect option is known to be a “developer” tool but it’s not just developers who benefit from it. Even beginners and non-developers can use this tool to learn how a website is built and how each of its elements works collectively. If you’re looking forward to using the inspect element option when browsing the web on an iPhone, this post should help you find a way to do that.
Related: How to inspect element on Android
Can you inspect web elements directly on Safari?
The simple answer is no. Safari on iOS, like many other mobile browsers doesn’t offer you a native inspect tool for viewing a webpage’s development. Apple doesn’t provide a reason for why there isn’t such an option but we believe it has got to do with how small displays are on smartphones. A smaller display size may make it harder for users to navigate around the boxes that are being inspected as you may have to carefully place the cursor when you want to edit a webpage’s code or even locate one.
Another reason for this could be the lack of computing power on smartphones. Although modern iPhones have enough power to run graphic-intensive games, it may be tricky to view a website’s page info as not all websites are created equally. Some websites may have a lot of resources and layers that are carefully crafted to make it look seamless but the same resources may take some time to load up when inspected.
Related: Loop a Video on iPhone [Guide]
Inspect Element on iPhone: What other options do you have?
While you cannot natively use the ‘Inspect Element’ tool on the Safari app on iOS, there are still ways to work around this limitation. Provided below are three ways you can inspect elements of web pages you visit on Safari on your iPhone.
Method #01: Using Safari on your Mac
If you own a macOS device in addition to your iPhone, then you can still inspect webpages directly from the Safari app, but on the Mac. Apple lets you debug webpages from Safari on iOS like you would on the Mac using its ‘Develop’ tools. While the process of debugging a site is relatively simple, its initial setup may be lengthier than you what you may expect. But fret not, we will explain the setup process in the simplest way possible and help you inspect pages with ease after the first time.
Enable Web Inspector on iOS
To be able to debug web elements, you first need to enable Web Inspector for the Safari app on iOS. To do this, open the Settings app and select ‘Safari’.
Inside Safari, scroll down and tap on ‘Advanced’.
On the next screen, tap the toggle adjacent to ‘Web Inspector’ until it turns green.
Initial setup on Mac
Once you’ve successfully enabled Web Inspector for Safari on iOS, it’s now time to get the setup done on your Mac. On the Mac, open the Safari application, click on the ‘Safari’ option from the Menu bar and select ‘Preferences’.
In the window that appears, select the ‘Advanced’ tab from the top and check the ‘Show Develop menu in menu bar’ box.
You should now see the ‘Develop’ option appear at the Menu bar at the top.
Now, using the USB cable that came with your iPhone, establish a connection between the iPhone and Mac. When your iPhone gets connected to the Mac, you can click on ‘Develop’ on the Menu bar and see if your iPhone appears in the list of devices. If yes, click on the device name from this list.
To make sure you can inspect webpages wirelessly without requiring a USB cable as you did just now, click on the ‘Connect via Network’ option when the iPhone menu opens.
Now, you can disconnect your iPhone from the Mac and you will still be able to inspect webpages without connecting a cable in between them.
Inspect webpages from iOS on a Mac
Now that you have enabled ‘Connect via Network’ on the ‘Develop’ menu, you can inspect webpages from Safari on iOS directly on your Mac. You just need to make sure that both the iPhone and Mac are connected to the same wireless network to be able to debug webpages wirelessly.
For this, open the Safari app on your iPhone and go to the webpage you want to inspect.
With your iPhone unlocked and the selected webpage open, move over to your Mac and open the Safari application there. Here, click on ‘Develop’ from the menu bar and go to ‘iPhone’.
When you hover over your ‘iPhone’, you should see a list of web pages that are open on iOS. Click on the webpage you want to inspect from this list.
A new window will load up on the Mac showing all the info that can be inspected from the selected webpage.
At any time during your inspection, you will be able to see which part of the page a line of code points to by looking for a blue area on your iPhone.
This blue area indicates that the code that you’re hovering over on the Mac is what makes up the highlighted element for this particular webpage. Moving between different lines of code will move this blue highlight across different parts of the page on your iPhone in real-time.
Related: How to Keep Effects in FaceTime
Method #02: Using Shortcuts on iOS
If you don’t own a Mac or want a sneak peek into a website directly from your iPhone, then you will be glad to know that the iOS Shortcuts app for this. The Shortcuts app on iOS offers a bunch of pre-made selections that let you view a page’s source code, edit a webpage, grab images from a website, and look for older versions of a webpage from within the Safari app. Unfortunately, there’s no single shortcut that offers full-fledged web debugging on iOS, so you will need to add a shortcut for each of these purposes.
We found the following shortcuts that you can use to perform debugging on websites directly from iOS. These are:
View Source – This shortcut lets you view the source code of a web page in base bones format.
Edit Webpage – This shortcut lets you edit the contents of a webpage locally so you may test a new design or format and how it may look on your iPhone.
Get Images from Page – A primary reason to inspect a page may be to look at images or save those which are otherwise un-interactive. This shortcut grabs all the images from a certain webpage and then previews them collectively. As the screenshot below indicates, you can view every single one of the 24 images that are hosted on the selected webpage.
Wayback Machine – This shortcut takes you to a webpage’s Wayback Machine where you can see its previous versions that remain saved on the Internet Archive.
Depending on how you want to inspect web pages on iOS, you can add any of these shortcuts to your iPhone by either clicking on the relevant links above or searching for them inside Shortcuts > Gallery.
In the search results, tap on the shortcut you want to add to the iPhone.
When a preview screen opens, tap on the ‘Add Widget’ option at the bottom.
The shortcuts you all will appear inside My Shortcuts > All Shortcuts screen and they’ll also be accessible inside Safari’s Share sheet.
To inspect a webpage, open it on Safari and tap on the ‘Share’ button at the bottom.
In the Share sheet that appears, scroll down and find the shortcuts you added to your iPhone.
Selecting ‘Edit Web Page’ will directly let you edit parts of the webpage. When you select any of the other three options, you’ll be prompted whether you want the shortcut to access the webpage. Here, tap on ‘Allow Once’.
Related: How to Add WidgetSmith to Home Screen
Method #03: Using third-party apps
If you’re not satisfied with the above results, you will have to explore third-party apps to be able to inspect elements of a webpage. Similar to Safari, you won’t find a way to inspect a web page inside the most popular web browsers (Chrome, Firefox, Brave, etc.). Instead, you’ll have to rely on an app that’s created to do this specific task and apps like these can be hard to find.
While a simple search on the App Store will yield you several results for inspecting web elements, you won’t find that many apps that are available for free and are rated highly. Based on user feedback, we recommend you install Inspect Browser or Gear Browser apps from the App Store, which provide element inspection and editing on JavaScript, CSS, and HTML.
That’s all you need to know about inspecting elements on an iPhone.
RELATED
