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:


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?

UPDATE on 28 Feb ‘18: A more elegant and faster way to examine the code

I found a great app on the App Store a few days back. It’s not cheap but the 15 quid or so are cash well invested, no doubt.

It’s called Web Tools and it indeed is incredible._

It allows you to examine the source code, offers a JavaScript console AND on top of that, it has the option to resize viewport so you can test your designs for different screen sizes, kinda the way Google Chrome’s responsive mode does.