View Source from Safari on iPad

UPDATE: Thank you to Rixtur for the update for iOS 6. Steps updated.

I’ve been enjoying the iPad quite a bit.  This device is going to change everything.  I have lots of thoughts, one of which is that the iPad will be a high productivity device.  Feeding into that, here’s a quick way to view the html, css and javascript source code of a web page from Safari on the iPad.
This guide is adapted from Dustin Caruso’s note on viewing source in Safari for the iPhone.

1. Visit this page using Safari on your iPad.

2. Use your touch selection skills to copy the following line of javascript:

3. Tap  + then Add Bookmark (Note, you can not bookmark a blank tab, so you must visit another web page first to do this.

4. The first text field is the Title field. Change the title to View Source.   Leave the second field (the Address Field) alone and hit save.

5. Tap the Bookmarks icon and then edit.  Find View Source in the list and tap the right arrow for the bookmark’s details. Now tap the Address Field and hit the X icon to clear it. Tap and paste the javascript from the clipboard.

5. Tap the Bookmarks navigation item to save the changes.

Voila.  Go to any web page using Safari, tap the Bookmarks icon and hit View Source.  Safari will open a page of source code in plain text in a new window.

87 comments

  1. Nice tip that… I’ve been struggling with how to view source on the iPad for a while. Thanks 🙂

  2. Only shows from head? I wouldn’t normally care except for the only thing I needed to see the source for was to see what classes modernizr added to html :{

  3. Thanks for the tip, it worked like a charm. Only question is this, is there a way to copy the text from the source code, so I can paste it in another document?
    Thanks.

  4. This is great. Great directions, simple and easy to implement. I use the iPad in place of my laptop so much, especially for researching websites. This is awesome. Thanks so much for sharing! – Bob

  5. Hello, thanks for putting this online (with all the other great resources). Am currently on vacation away from my computer and I was stumped with only my iPhone to debug a website.
    Thanks again, really made my trip better.

  6. Great tip! This was the missing piece of the iPad experience for a curious web designer. “You complete me!”.

  7. I cannot work out how to do this. I can selec the text, but dont understand what “tap + then add bookmark”. What should I tap?
    1) the “+” on the keyboard. This doesnt work.
    2) the text I have just copied? It just unhighlighs the text
    3) There is no “+” on the browser top nav like in the screen shot in the IPAD 3. There is a “+” to add new tabs, but this doesnt have anything to do with it I presume.

    So cant work out how to get this tip to work in ipad3.

  8. What doesn’t work in iOS 6 is step #3, because Safari won’t let you create a bookmark of a blank tab. But you can do it if you just bookmark this blog article, change the Title to “View Source” and follow the rest of the steps.

    Works great! Thanks!

  9. Awesome! Exactly what I needed. Comparing code on two web-sites. Using my iPad 2 (iOS 6.1), don’t have my laptop with me today. Found this – problem solved!

  10. I tried to add this to the iPad with iOS7 today on May 12, 2014. But when I tried to create a bookmark, I can sure edit the title but not the address field. So cannot paste the JS code in the address bar.
    Am I doing something wrong?
    Thanks.

  11. I got the source code view on the iPad with iOS7 now, but with VoiceOver, it reads it as a chunk. I cannot navigate the code by line or word etc. Sothat seems to be a barrier.
    Thanks

Leave a comment

Your email address will not be published. Required fields are marked *