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

Mar 30, 2012 - 18 Comments

View Source 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. This awesome tip comes from Michelsen.dk, and here’s how to set it up:

  1. Bookmark this page (or any other) with Safari on an iPad, iPhone, or iPod touch and name it “View Source”
  2. Click here to view the bookmarklet javascript and Select All -> Copy
  3. Tap the Bookmark icon at the Safari new browser screen and tap on “Edit”, then tap the bookmark you saved in step 1
  4. 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.

A similar tip utilizes an edited bookmark to let you run Firebug with Mobile Safari on an iPhone or iPad too, which may be a bit more useful for developers.

Found via ShawnBlanc on Twitter, you can follow us there too

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

Posted by: Paul Horowitz in Development, iPad, iPhone, Tips & Tricks

18 Comments

» Comments RSS Feed

  1. chengduflu says:

    It should be built into iOS, but this is yet another reason that iOS isn’t ready for serious work and further proof it’s a consumer OS built for consumption, not for work.

    • Hans says:

      “It should be built into the iOS..”

      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.

    • Fradrok says:

      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.

      Well said, Hana.

      • Richard says:

        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.

        Hans – Apple say what is and isn’t included.

    • Dave says:

      I agree – cute toy, not a serious tool

  2. Peter says:

    I use snoopy which is a variation on this idea http://snoopy.allmarkedup.com/

  3. Brandon says:

    I found this one and it works:

    javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘Source of ‘+location.href+”);a.close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

  4. Alotus says:

    Is very cool I like it a lot

  5. Barkdust says:

    this works on Android devices too

  6. gondor says:

    Here’s the PHP code if you want to host this yourself

    http://ole.michelsen.dk/blog/wp-content/uploads/2011/07/viewsource.txt

    You need GESHI installed too (syntax highlighter)

    http://qbnz.com/highlighter/

  7. [...] it with a javascript that changes on page behavior, similar custom bookmarklets have allowed us to View Page Source in iOS Safari and even use Firebug on [...]

  8. Peter says:

    iPhone safari bookmarks don’t recognise the curly brace character in the JS, and it’s not available via editing. What to do?

  9. [...] 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 [...]

  10. Nicolas says:

    Nice trick! But, …
    There’s easier way. App store has the app called “HTML Viewer”. It’s free and you can switch the site any time. Search tool is included as well.

  11. Chris says:

    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.

  12. Kelly says:

    Thank you So Much! Works beautifully you’re the best!

  13. Phil says:

    thank you this is very helpful

  14. Ed says:

    Interesting trick, but this farms out the source generation to an outside site, apparently losing all dynamic device-specific content.

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates