View HTML Source on iPhone

View HTML Source on an iPhone

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.

View Source app for the iPhone

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.

View Source iOS Safari Extension

The color-coded HTML source code will appear.

View Source iOS Safari Extension

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.

View HTML Source on Your iPhone for Free Using a JavaScript Trick

HTML is a host markup language. There are usually other languages embedded in HTML source. JavaScript is a ubiquitous technology embedded in just about every web page. It breathes life into web pages, allowing them to be dynamic without constantly reloading the entire page. JavaScript can also help you view the HTML source of a web page, using a neat trick developed by Ole Michelsen.

First, add this page to your Bookmarks by tapping the Share button on the top right of Safari.

Add this page as a bookmark

Tap Add Bookmark and name the Bookmark “View Source”, then tap Save.

name the bookmark View Source

Next, copy this JavaScript code:

javascript:(function(){
  var w = window.open('about:blank'),
      s = w.document;
  s.write('');
  s.close();
  var f = s.body.appendChild(s.createElement('form'));
      f.setAttribute('method','post');
      f.setAttribute('action','http://ole.michelsen.dk/viewsource/?uri='+location.href);
  var i = f.appendChild(s.createElement('input'));
      i.setAttribute('type','hidden');
      i.setAttribute('name','DOM');
      i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));
  f.submit();
})();

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.

tap address bar and hold finger on bookmark

edit bookmark

Now paste the JavaScript code into the address field and tap Save on the top right.

paste JavaScript code into address field

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.

As you can see this is a clever kludge, but a kludge nonetheless. It’s not as elegant as the View Source app and doesn’t offer color coding options. If you email the source code, you just get a link, not the source code, unlike the View Source app. View Source is also much faster than the JavaScript trick. This trick depends on a web application running on the ole.michelsen.dk server. If the server is offline or he decides to remove the page, it won’t work.

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.



Share This Page

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Follow Appledystopia

twittergoogle_pluspinteresttumblr




More from Appledystopia:

Please leave a comment. Email, name and website fields are optional. Your comment will appear after being approved by the moderator.