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.

‍

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.

‍