How to inspect element on iphone

How To Inspect Element On iPhone (3 Easy Ways!)

Inspect Element is an extremely handy tool that reveals the underlying code of a website. The tool is incorporated into the Google Chrome, Firefox, Safari, and Internet Explorer web browsers and it is used daily both by experienced front-end developers and novice website builders alike.

If you are ever attempting to do some work on the fly, knowing how to Inspect Element on your iPhone can be extremely useful. Here’s how.

How To Inspect Element On iPhone

To Inspect Element on iPhone, you will need to use a workaround. This is because the Inspect Element tool is not native to iOS. The best alternative methods include downloading the ‘Achoo HTML View & Inspector’ application, using custom GitHub JavaScript, and downloading the ‘MIHTool Basic – Web Debugger’ application.

In short, if you are wondering ‘can you Inspect Element on iPhone?’, the answer is no, since the tool is not native to iOS. However, there are a number of alternative tools and methods that enable you to view the underlying code of a website on your iPhone.

Let’s review each of the top 3 methods in greater detail below.

Achoo HTML Viewer & Inspector

With the new iOS 15 software update, you can now Inspect Element on iPhone within Safari by using the Achoo HTML Viewer & Inspector application.

It is important to note that in order to use this application you must first have the iOS 15 software downloaded on your iPhone.

  1. First, head over to the App Store.
  2. Next, type ‘Achoo’ into the app search field and select Achoo HTML Viewer & Inspector and click Get.
  3. Now, double click the side button to install the application and enter your Apple password if requested.
  4. Once the application has fully downloaded, open up Settings (you do not need to open the Achoo application directly).
  5. Then, select Safari > Extensions > Achoo.
  6. Make sure Achoo is turned On and All Websites is set to Allow.
    How to Inspect Element on iPhone - Achoo
  7. Lastly, open up the Safari web browser, click the extension symbol in the bottom left corner of the screen, and click Achoo HTML.
    How to Inspect Element on iPhone - Achoo

That’s it! The HTML viewer will now pop up on the bottom of your iPhone screen.

Notably, an Edit button will also appear on the menu bar at the bottom of your screen.

When enabled, you can directly edit the code of a website and view the changes in real time. Like Inspect Element, these changes are of course not permanent.

Custom GitHub JavaScript

To inspect element on iPhone using your web browser, you will need to use some custom GitHub JavaScript, as it is not native to iOS devices.

While this may sounds a bit complicated, the process is actually incredibly simple.

  1. First, within the Safari application, go to www.google.com.
  2. Then, click the middle button (the icon looks like a box with an arrow pointing up) on the navigation menu across the bottom of your screen.
  3. Next, click Add Bookmark.
  4. Rename the bookmark and call it Inspect Element. Click Save.
  5. Now, select the Bookmark button (the icon looks like an open book) on the navigation menu across the bottom of your screen.
  6. In the Bookmarks section, click Edit and then select the newly created Inspect Element bookmark.
  7. Clear the URL text field and copy and paste the code below. Then, click Done (three times).
    How to inspect element on iPhone
  8. Finally, navigate back to the Inspect Element bookmark and click on it.
javascript:(function(F,i,r,e,b,u,g,L,I,T,E)%7Bif(F.getElementById(b))return;E=F%5Bi+’NS’%5D&&F.documentElement.namespaceURI;E=E?F%5Bi+’NS’%5D(E,’script’):F%5Bi%5D(‘script’);E%5Br%5D(‘id’,b);E%5Br%5D(‘src’,I+g+T);E%5Br%5D(b,u);(F%5Be%5D(‘head’)%5B0%5D%7C%7CF%5Be%5D(‘body’)%5B0%5D).appendChild(E);E=new%20Image;E%5Br%5D(‘src’,I+L);%7D)(document,’createElement’,’setAttribute’,’getElementsByTagName’,’FirebugLite’,’4',’firebug-lite.js’,’releases/lite/latest/skin/xp/sprite.png’,’https://getfirebug.com/','%23startOpened');

That’s it! The Inspect Element on iPhone view will now be enabled whenever you open this bookmark.

MIHTool Basic Web Debugger

You can also Inspect Element on iPhone using an older application called MIHTool Basic – Web Debugger that is available in the App Store and free to download.

  1. First, navigate to the App Store.
  2. Next, type ‘MIHTool’ into the app search field and select MIHTool Basic – Web Debugger and click Get.
  3. Now, double click the side button to install the application and enter your Apple password if requested.
  4. Once the application has fully downloaded, open up Safari (you do not need to open the MIHTool application directly).
  5. Then, click the middle button (the icon looks like a box with an arrow pointing up) on the navigation menu across the bottom of your screen.
  6. Swipe the menu on the bottom of the screen to the right and select the ellipses symbol (“…”) that says More below it.
  7. Under the Activities section, make sure that the MIHTool toggle button is set to On and then touch Done.
    How to Inspect Element on iPhone - MIHTool
  8. Finally, back in the sliding menu at the bottom of the screen select MIHTool and then press OK to enable it.
    How to Inspect Element on iPhone - MIHTool

Ok, you’re all set! Now when you browse Safari the MIHTool will automatically load the Inspect Element view.

Conclusion

Since the Inspect Element tool is not native to iOS, you will need to use a workaround. Here are 3 different ways you can view the underlying code of a website using your iPhone.

How To Inspect Element On iPhone

  1. Download the Achoo HTML Viewer & Inspector application
  2. Use custom GitHub JavaScript
  3. Download the MIHTool Basic – Web Debugger application

Was there one particular method that worked best for you to view source code directly on your iPhone? Or, perhaps you are aware of another way? Go ahead and let us know in the comments section below!

Related Posts

Leave a Reply

Your email address will not be published.