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.

83 thoughts on “View Source from Safari on iPad

  1. Is there anyway for you to improve it so it allows us selecting some text of the source code to copy/paste ?

  2. 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

  3. Thanks,
    add to this, do you know how to copy all this source and send to email or twitter?

  4. Fantastic tip, was super helpful for a problem I was haing today, thanks!!

  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. This is great however, my ipad won’t select all of the text so i can use it on my PC, ideas?

  8. 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.

  9. 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!

  10. 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!

  11. Many thanks for your useful tips. It worked perfectly on my iPad with iOS 6.1.2.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>