How to “View Source” from Safari on an iPad or iPhone

Ever wanted to view source of a webpage from an iPad or iPhone? Unfortunately, mobile Safari doesn’t include the feature on it’s own, but with the help of a custom bookmarklet you can view source of any web page right in iOS.

Here is how you can set this up so that you can view source in Safari for iOS by using a bookmarklet and javascript trick:

Bookmark this page (or any other) with Safari on an iPad, iPhone, or iPod touch and name it “View Source”

Tap the Bookmark icon at the Safari new browser screen and tap on “Edit”, then tap the bookmark you saved in step 1

Paste the javascript code you copied in step 2 into the URL bar and save the changes by tapping “Done”

Now when you want to view a web pages source, open the Bookmarks menu and select “View Source”, the source code will appear in highlighted syntax with clickable source urls.

One thing to note is that the javascript being used here sends the page to the michelsen.dk server for processing, if you’re not comfortable with that there are other solutions out there but they won’t highlight the syntax and aren’t nearly as elegant overall.

Who knows, maybe one day Safari in iOS will get a native ability to view source? Until then, you’ll have to rely on this party apps or tools like this.

This worked fine in testing but some users report different results on various later versions of Safari and iOS. Let us know in the comments below what works for you and what iOS version you are using.

Who determines what “should” be built into the iOS? I think there are plenty of things that I think “should” be included in iOS that aren’t, but that hardly gives the argument that iOS isn’t ready for serious work. I’m certain that many of the individuals that use it for Enterprise would disagree with you.

Hmm. View Source on a browser page (Safari being one of a gazzilion apps out there) as a “not one click away” feature means that iOS isn’t ready for serious work? Two different products. Plus, you CAN see the source by using the tip outlined above … with Safari and iOS.

Are you wanting to use your iPad to develop websites? I normally use my Mac, then test on the iPad by clicking refresh.

Fradrock you’re right, but you’re also wrong.
I use my mac to develop websites, but a lot of the time, I’m not at home to use it, and don’t have a MacBook, yet, so I want to use my ipad.
I found a fantastic little app called Textastic that works just like dreamweaver – allows me to code, highlights each different language correctly, shows errors in code and allows me to control uploads and downloads via FTP. Is it wrong to want to be able to view the source code natively as well? After all, they do advertise the ipad as a replacement to a laptop – it’s not, it’s more of a complement, but that’s how they advertise. Chengduflu is wrong in saying that its not ready for work.. It is, but there will always be outlying cases that aren’t happy with what they have, and demand more.

[…] way to add functionality to Safari that otherwise is impossible, allowing you to do things like “View Source” from Safari in iOS, adjust font sizes of web pages, and even run Firebug lite in iOS. This particular one has circled […]

Good hack. If you want it to display the enclosing tags, change ‘innerHTML’ to ‘outerHTML’ in the bookmarklet. otherwise it will display only the head and body tags and all their contents.

I needed to be able to see the html tags specifically on the iPad, because of a library I was using that dropped classes into the html tags based on the type of browser and device, in order to verify that it was working.