It’s pretty simple to view page source on a desktop… just right-click and request it. But it’s not so easy on iPad or iPhone. There’s no one-click interface for iOS, but our guide shows how to view page source in iOS.
So… it’s a bit of a workaround to view page source in iOS. But it only takes about 60 seconds to set up, and then you have pretty much a one-click solution any time you want to view page source in iOS on your iPhone or iPad. This is a simple solution, but be warned that it’s probably not for those who are at the stage where they want to start to use a computer as a beginner.
Step 1: In Safari, Chrome, Firefox etc on your iPad or iPhone, on any page (even this one) use the ‘Send to’ symbol to set a bookmark.
Step 2: Delete the name of the page, and rename the bookmark ‘Page Source’
Step 3: Edit the bookmark, and replace the URL with this code:
javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘<!DOCTYPE html><html><head><title>Source of ‘+location.href+'</title><meta name=”viewport” content=”width=device-width” /></head><body></body></html>’);a.close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
Step 4: Next time you are on a web page you want to view page source in iOS on your iPad or iPhone, click your Page Source bookmark, and …. there it all is!
Why do you need to view page source in iOS?
behind every website is page source text, which everyone can view and study. This source code makes it clear what a website actually is, namely a pure text document. It doesn’t matter if it was created with WordPress or a program with a slick graphical interface.
At the end there is text, which, in addition to the obvious content, also provides a lot more information. This information is particularly useful when there are problems, but the reason for this is not easily discernible. The help is often: Show page source text! But how do you get to that? And what exactly does it say?
Top Apple iOS 14 features to know about
Each browser offers the option to view page source text
The path to page source text is very short with the popular browsers: Click anywhere on any web page with the right mouse key. The context menu appears, which includes the View Page Source Text option. Clicking on it, now with the left mouse key, will cause the source code to open in a new tab or window. Alternatively, you can use the Key combination Ctrl+U on a Windows computer. Both procedures apply at least to Google Chrome, Firefox and Internet Explorer.
What does the page source text show?
Basically, the page source text corresponds to the browser view with all its texts, images and graphics. But it also represents all HTML . This not only means that there are a lot of letters and characters in angle brackets. It also means that, for example, images and graphics do not appear. Instead of the actual image, you will see the appropriate HTML element with its clickable path to the location of the image file. In addition, the source code also shows all elements that are not visible in the browser view. This includes, in particular, all the data that are in the so-called head
area.
What is the point of doing this?
To learn!
In fact, there are good reasons to keep looking at source code. When I started working on HTML a long time ago, it was all about learning. How did they do that?, I wanted to know. So I looked at the code and tried to understand. As with all other languages, learning only helps with constant practice and application. A wonderful offer for this is also the browser function Investigate (or Examine Element or Examine or whatever it is currently called). In contrast to displaying page source text, however, the investigation not only provides the complete source code, but also clearly represents the individual elements. For example, you can find out exactly what a single item is called and how it is formatted.
Which theme does this website use?
You may have noticed that you wanted to know if a website was made with WordPress. Or what theme it uses. No special tools are needed for this. Select View page source code, and then use Ctrl+F to search the page for theme. If it is a WordPress site, you can find the link
links of the style sheet(s) with the path from which the theme name is indicated. Since themes are always stored in the directory wp-content/themes/, you can read its name by the following folder name. In the case of this website, it would be: wp-content/themes/radiate.
Finding errors
The second important reason is to find errors when there are problems, but you don’t realize the reason for them. Sometimes the complete view alone provides the essential insights. Not only is the extensive head
area a potential supplier for errors. Also in the body
area there is a lot more than the individual contribution seems to give. You have not provided all this information on your individual (contribution) pages. So where does this information come from?
The answer is: you have different sources. One is, for example, the template header.php, which first of all makes other important ones with the necessary html
tag. style-Angaben
probably comes from the Additional CSS of your theme. Via link
link, all style sheets and probably already various scripts are integrated. However, the so-called meta
tags, which are read out by search engines, are also very important. For example, they should not appear double; especially not when it is the so-called open graph tags, which serve to represent a post on Facebook.
In the body
you will find information about the header area and the menu of the website. The actual content only appears in the content
area , to which then also usually belongs a primary
area. And if there is a primary
area, there is also a secondary
area. It is then responsible for the sidebar with all its widgets. And finally there is the footer
, i.e. the foot area, in which probably also a lot of scripts are still standing. So it might seem you have to dig pretty deep in search of the error… But the effort can be worth it!