How to view source on iPhone and iPad

If you’re anything like me, and for your sake I hope not, then you might have this problem of needing to check the nuts & bolts of every site you visit.

On Chrome & Safari, this is easy peasy – simply Inspect Element. But what to do when uncovering a juicy little site while on the go?

Now, I’m sure there are a variety of nifty apps that provide Inspect and View Source functionality. But, if you’re looking for a quick & painless way to view source on your iPhone or iPad, here it is.

1. Copy This Bookmarklet JS

Select All, then Copy the following piece of Javascript. It’s a Bookmarklet function care of Ole Michelsen.


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

2. Create a View Source Bookmark

Create a bookmark – the page you’re currently on will be fine – and name It View Source.

uiblog-viewsource-createbookmark

3. Edit Bookmark With JS

With the above script copied and ready to ride, go to your Bookmarks, click Edit, and select your newly created View Source bookmark. In the Editor mode, remove the existing page url and paste in the script.

Save it. You also might want to slide that puppy up to position it as the first bookmark.

uiblog-viewsource-editbookmark

4. Boom. You’re done son.

That’s it. Now when pursuing the interwebs on an iPhone or iPad, simply select your View Source bookmark to peep the source.

Note: When you tap the bookmark, the source will silently open up as a new tab. So, you’ll have to open all tabs to select the newly created tab.

View Source on iPhone and iPad