iOS for the iPhone, iPad and iPod touch is a great mobile operating system for consumers. Developers may find it difficult to accomplish basic tasks. This article demonstrates how to view the HTML source of a webpage in Safari for iOS.
Developers love to look at code. Whether it is your own code or someone else’s, it is often essential to fixing problems, deploying solutions or learning new skills. Unfortunately, if you are on your iPhone, iPad or iPod touch, this isn’t easily accomplished.
You can forward the link to your computer, but you might not see the mobile version of the site. There are quite a few workarounds, but wouldn’t it be great if you could just view the source on your iPhone? You can.
There are actually a few ways to accomplish this. With a little effort, you can do it for free, but it is a bit of a kludge. If you are willing to spend $1 for an app (with a Safari Extension), you will get better results.
View HTML Source on Your iPhone With the View Source App
The View Source app is the best and easiest way to view HTML source using Safari. The standalone app isn’t that handy. It requires the user to type or paste the URL. With iOS 8, Apple introduced Extensions, which allow apps to embed functionality within other apps. The View Source Safari Extension is by far the best way to view the source code of a web page.
It doesn’t take a degree in computer science or applied math to get this working. Simply go to the App Store and install the View Source app. The app only costs $1. Once installed, the Safari Extension is available. To view the source of a web page, simply tap on the share button and then tap on the View Source button.
The color-coded HTML source code will appear.
View Source offers a few more features. One can toggle between views of assets, the document object model (DOM), script and info. Sharing the source code directly from the Safari Extension is effortless. You can also configure eight different color coding modes. Not bad for a buck.
There are other apps and browsers in the App Store that can display HTML source code. View Source is the cheapest and highest rated app. If $1 is too expensive and your free time is cheap, there’s a free way to view source code.
First, add this page to your Bookmarks by tapping the Share button on the top right of Safari.
Tap Add Bookmark and name the Bookmark “View Source”, then tap Save.
var w = window.open('about:blank'),
s = w.document;
var f = s.body.appendChild(s.createElement('form'));
var i = f.appendChild(s.createElement('input'));
Tap on the Safari address bar to display the panel of favorites and bookmarks. Hold your finger on the View Source bookmark you just created until it expands, then release your finger and tap on Edit.
That’s it. Whenever you need to view the source of a web page, simply launch the View Source Bookmark, and you will see the source code.
I’d like to say, “you get what you pay for”, but the View Source app is a remarkable deal. Nonetheless, the frugal coder can also enjoy the ability to view HTML source on any iOS device. This trick will work on your iPhone, iPad or iPod touch.