Source code is something that every developer is familiar with. In fact, they play with the source code every day. Checking the source code of any web page or website is easy as pie, while running your work on a PC or laptop. Just right-click and you have the option on the right of the screen. Similarly, when you’re using an Android phone, browsers like Chrome give you the option to easily view the source code of any web page.

But that’s not the case when you’re dealing with an iPhone or an iPad. If you own an iPhone, and you get an urgent need to check the source code of any web page, you feel helpless and have to go through the whole process of opening your PC, visiting that web page, and then inspecting it. This whole process is annoying and definitely takes a lot of time. And you want if possible to visit the same web page using my iPhone’s Safari browser at that time.

Well, to your surprise, yes it is possible to view the HTML source code of any web page through the Safari app on your iPhone. Although it’s not as easy as Android phones, we’ve shared some tips and tricks that will help you out. So use these methods and the next time some web page fascinates you and you want to visit it, just do it using your iPhone or iPad.

1. Use the Web Inspector Safari extension on iPhone

There is a new Safari extension for iPhone and iPad called Web Inspector. It was recently launched after the iOS 15 update. This extension is the most advanced web inspector tool ever created for mobile smartphones. Why we say this is because it gives you features that are available in the desktop browser inspector tool. You can not only view the source code of a web page but also inspect specific HTML elements in the DOM, run code in the console, examine network requests and resources used by the web page, and more.
Here’s how you can use the Web Inspector extension in the Safari browser to view the source code of a page on your iPhone or iPad –

First, install Web Inspector from the App Store   . It is available for free and will only take a few seconds to download as the size is very small.

Once installed, you will see the app added to your home screen. Click it to open and then   ask to allow the Safari extension from Settings.

 Open  Settings on your iPhone or iPad  and go to Safari  .

Under General,   click on the  Extensions option and then  tap on Web Inspector . Toggle the button to make it work. Now you have successfully added Web Inspector extension to Safari browser.

To check the source code, open the Safari app and go to the web page.

 Tap the  Aa icon on the URL tab  and then click the Web Inspector  option from the menu. If it’s not there, go  to Manage Extensions  and enable it. For the first time, you will be asked to allow it to access information on web pages

Clicking on Web Inspector will open a new window on your screen where you   can check the HTML source code of the web page. You can use selectors (arrows) or search tools to find a specific element on a web page and inspect its code.

If you go  to the Elements  tab, there you can examine more details of the element, such as properties, styles, and even math styles, just like you would in a desktop browser. You can also edit the web page’s HTML source code, apply changes, and view live previews.

2. Create a View Source shortcut for Safari

In this method, we will use the Shortcuts app on the iPhone to create a shortcut to view the source code in Safari. This is a very technical procedure and you need to be careful while following the steps. To get started, first find and open the Shortcuts app and tap the plus button in the top right corner. On the next screen, give your shortcut a name such as View Source or whatever you want.

After that, tap the three dots on the top right corner which will open a pop up box on your screen. Enable the Show on Share Sheet  button   and click the Done option.

Click any option in the Receive command   to set the type of content you want to receive from the share sheet on the Safari web page . Be sure to clear all other inputs.

Now   tap  the + Add Action button and  search  for Make HTML from Rich Text  . Click on it to add it to the shortcut.

Find another action called Quick Look using the search bar at the bottom   and add it as well. The final page will look like this:

Now you have successfully created a shortcut to view the source code of any web page in Safari browser. To use it, go to the web page you want to visit and click the share button below Swipe it and click on the View Source option you created with the Shortcuts app. This will open a pop up box where you can see the HTML source code of the web page.

3. Safari bookmark trick to view page source

This is the old school method that was the only way to view source code on the iPhone before there were no extensions available for the Safari browser. This method requires you to use a script code and save it as a bookmark in Safari. Then you just need to open the bookmark of the web page you want to visit. A detailed guide to this procedure is here –

First, open the Safari browser on your iPhone or iPad and view any web page. Click the share button at the bottom (a square with an arrow pointing up). Next, click on Add Bookmarks option and then save it. Now you need to go to bookmarks, click on edit option and then choose the bookmark you saved recently. Change its name  to something like ” view source  ” and replace the address field with the code below.

Now all the technical part is done. Whenever you want to view the source code of a web page, simply open it, go to Bookmarks, and click on the new bookmark you created to run the script. Then you will see the code on all your screens. The disadvantage of this approach is that it doesn’t highlight HTML elements in different colors so it becomes a little harder to find what you’re looking for.

4. Use Google’s webpage cache to view the source

This method is for you if you don’t want to install third-party extensions on your phone or use scripted methods to view the source code of webpages on your iPhone or iPad. Here’s a look at the HTML source code of the web page using Google’s cached version.

For those who don’t know, Google stores a cached copy of all the web pages it indexes You can access this cached version publicly by adding cache: before the web page address. This is all you have to do in this method.

Simply, open the Safari browser on your iPhone or iPad and go to the web page or website whose source code you want to view. Next, click the URL tab and add  Cache:  Start. As soon as you visit the link, it will take you to Google’s cache page. Make sure there are no spaces after the cache: otherwise you’ll land on the Google search page instead. The next thing you need to do is click on the View Source option.

Please note that this method will only show the web page as it was last crawled by Google. Meanwhile, the current page may have changed so you won’t see the updated HTML source code with this method until Google crawls the web page again.

Use the view source application

Although we have shared enough methods for this topic but this last one is for those who want to use a specific application to view the source code of web pages on their iOS device. There is an app called View Source  that you can find in the App Store. You just need to install this application on your phone, open it and enter the URL of the web page you want to visit. It will then instantly display the HTML source code. Simple as that!

Another feature of this app is the direct integration with the Safari browser. When you’re browsing in Safari and need to quickly see the source of a web page, just click the Share button and swipe up to reveal all the options. You will find the view source there. Clicking on it will open a pop-up window where you can see the source code of the web page.

So these are some of the methods you can use to view page source in Safari browser on your iPhone or iPad. Among all these, it is best to use the Web Inspector extension as it also gives you other useful features that are available in desktop browsers. In addition, you can use Google’s cache method to quickly view the source code of any web page without installing any apps or extensions on your device. Let us know which method you personally use. If you face any problem, feel free to share it in the comments below.