As a web developer and someone who does website troubleshooting, viewing source code of a website is part of the job. Unfortunately, none of the iOS web browsers offer this sort of functionality. Luckily enough, I was able to find a workaround. It’s not perfect but it’ll do. For now, anyway.

Bookmarklets to the rescue

It turned out to be pretty easy. Just bookmark any website, then go and edit that bookmark. Insert the following code into the URL field:

javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)(); 

Of course, you can rename the bookmark to something like ‘View Source Code’ or whatever you feel would tell you best what this particular bookmark is about.

Displaying source code

First, go to a website you want to view the code of. Then tap your newly created bookmark. It will show the source code in a new tab.

Obviously, there are limitations. You can view the code but you don’t get the usual developer tools so the code won’t be colour-coded, you won’t be able to play around with CSS definitions, it won’t show you any errors, etc. Still, better than nothing, right?