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 how each of them works on their own.

Those of you who use a Windows and Mac computer would already be familiar with the “Inspect” or “Inspect element” option. It’s a tool that provides a way to view a website’s source code, see all of its elements, and lines of code behind each of them, and edit its content. Although inspect option is known to be a “developer” tool, even beginners and non-developers can use it to learn how a website is built and how each of its elements works collectively.

If you’re looking to use Inspect Element when browsing the web on your iPhone iPhone, this post should help you do just that. 

Related: How to inspect element on Android

Can you inspect web elements directly on Safari?

The simple answer is no. The Safari app on iPhone, like other mobile browsers, doesn’t offer you a native inspect tool for viewing a webpage’s codes. 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 hard for you to navigate around the boxes that you are inspecting as you may have to carefully place the cursor where 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 be made of several layers of code, carefully designed to make them look seamless but they may take some more time to load up when you try to inspect them. 

Related: Loop a Video on iPhone [Guide]

How to inspect elements on a webpage on iPhone [3 methods]

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 1: 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 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 inside Safari

To be able to debug web elements, you first need to enable Web Inspector for the Safari app.

  1. Open the Settings app and select Safari.
  2. Inside Safari, scroll down and tap on ‘Advanced’. 
  3. 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, it’s now time to get the setup done on your Mac.

  1. On the Mac, open the Safari app, click on the Safari tab from the Menu bar, and select Preferences. 
  2. In the window that appears, click on the Advanced tab from the top and check the Show Develop menu in menu bar box at the bottom. 
  3. You should now see the Develop tab appear at the Menu bar at the top. 
  4. Now, using the USB cable that came with your iPhone, establish a connection between the iPhone and Mac.
  5. When your iPhone gets connected to the Mac, you can click on the Develop tab from the Menu bar and check if your iPhone appears in the list of devices. If yes, select your iPhone from this list. 
  6. To make sure you can inspect webpages wirelessly without requiring a USB cable as you did just now, click on Connect via Network when the iPhone menu opens. 
  7. 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 iPhone on a Mac

Now that you have enabled ‘Connect via Network’ on the ‘Develop’ menu, you can inspect webpages from Safari on your iPhone 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. 

  1. Open the Safari app on your iPhone and go to the webpage you want to inspect. 
  2. With your iPhone unlocked and the selected webpage open, move over to your Mac and open the Safari application there. Here, click on the Develop tab from the menu bar and select iPhone. 
  3. You should now see a list of web pages that are open on your iPhone. From this list, click on the webpage you want to inspect. 
  4. A new window will load up on the Mac showing all the info that can be inspected from the selected webpage. 
  5. 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.
  6. 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 2: Using the Shortcuts app 

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 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, 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 an iPhone.

  • View Source – This shortcut lets you view the source code of a web page in bare-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 that 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. 

You can decide which of the above shortcuts you want to add to your iPhone. 

  1. Depending on how you want to inspect web pages, 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. 
  2. In the search results, select the shortcut you want to add to the iPhone.
  3. When a preview screen opens, tap on Add Widget at the bottom. 
  4. The shortcuts you all will appear inside My Shortcuts > All Shortcuts screen and they’ll also be accessible inside Safari’s Share sheet.  
  5. Open the Safari app and go to the webpage you want to inspect.
  6. When the webpage loads up, tap on the Share icon at the bottom.
  7. From the iOS Share sheet, select the shortcut you want to use to inspect the webpage. 
  8. Some shortcuts will directly execute when you tap on them. Others would prompt you to grant access to the webpage. To grant access to the shortcuts, you can tap on Allow Once or Always Allow. 

Related: How to Add WidgetSmith to Home Screen

Method 3: 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. While there are a lot of apps in the App Store that claim to let you inspect web elements, we recommend you install any of the following apps that offer element inspection and the ability to edit on JavaScript, CSS, and HTML. 

That’s all you need to know about inspecting elements on an iPhone. 

RELATED