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

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

    Reply
  13. Pingback: Three ways to view web page source on the iPad & iPhone. « glasskeys.com
  19. Pingback: Viewing HTML Source Code on iOS | Tech N Comp
  25. Pingback: Cartoon: May the Source Be With You : Casa Semplice
  26. Pingback: Cartoon: May the Source Be With You | Golden Key Coaching
  27. Pingback: Cartoon: May the Source Be With You | Scripting4U Blog

  32. 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 :{

    Reply
  34. Pingback: IPad, web and developers | Serge's Technology View

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply
  86. Pingback: Ipad Website Code | Get Your iPad Now

Leave a comment

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