View source on the iPad and iPhone

As a web developer I’m frequently looking at the source code of various websites. Lately my new iPad has become my primary tool for surfing and reading documentation, but alas it completely lacks a view source feature.

A fine solution is to create a bookmarklet, which is a piece of JavaScript saved as a bookmark. When you want to see the source of a web page, just click the bookmark and the source of the page is displayed. I was inspired by this bookmarklet by Rob Flaherty, but it has a few shortcomings. To improve upon the bookmarklet concept, I created my own version with a few more bells and whistles:

  • The code is syntax highlighted (using GeSHi)
  • Links are clickable, so you can follow scripts etc.
  • Text is fully selectable
Clicking the bookmarklet will display the source of the web page

View Source Bookmarklet

The code

The following bookmarklet code basically posts the entire DOM to my server, which then takes care of business server-side:

javascript:(function(){
    var w = window.open('about:blank'),
        s = w.document;
    s.write('<!DOCTYPE html><html><head><title>Loading Source</title></head><body></body></html>');
    s.close();
    var f = s.body.appendChild(s.createElement('form'));
        f.setAttribute('method','post');
        f.setAttribute('action','http://ole.michelsen.dk/viewsource/?uri='+location.href);
    var i = f.appendChild(s.createElement('input'));
        i.setAttribute('type','hidden');
        i.setAttribute('name','DOM');
        i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));
    f.submit();
})();

How to install it

To add it on your computer and sync it to your iPad, just drag this link to your bookmarks:

View Source (click to try it out)

To add it directly from your iPad (or iPhone), you need to create the bookmark manually:

  1. Add this page as a bookmark
  2. Then click here to see the bookmarklet code and Select All → Copy
  3. Now edit that same bookmark, paste the code you just copied into the URL and name it something like “View Source”

Voilá!

Note that the source shown is the generated DOM, and not the original HTML. These might differ depending on the amount of JavaScript used on the page.

Update April 5, 2012

By popular demand, I have published the server-side PHP code to GitHub, so you can modify or host your own version of the bookmarklet. Remember that GeSHi is required.

This entry was posted in Tools and tagged , , , , , , . Bookmark the permalink.

60 Responses to View source on the iPad and iPhone

  1. Erik says:

    I love it. Been looking for this a long time. Thank you very much.

  2. Jeremy Abel says:

    Thanks for the awesome post, Ole. I was looking for ways to view the source code of a page on my iPad this weekend. Very much appreciated!

  3. Gary says:

    Or you could use icab.

  4. Benjamin says:

    Are you going to post the source code anywhere? Would love to fork! Line numbers and no line wrapping would be incredible!

  5. Pingback: How to “View Source” from Safari on an iPad or iPhone |

  6. Pingback: Visualizza sorgente su iPad | Mac Blog

  7. Ville says:

    Thanks for posting this, extremely useful!

  8. Mike Hessling says:

    I agree, this is good stuff. Would you post the source? I’d love to put this on my own server, rather than relying upon your continued good will (and wallet, you know–bandwidth could get out of hand).

  9. Pingback: 如何在移动版 Safari 浏览器上”查看源代码”[教程] | .i.分享

  10. Thanks for sharing the source code.

    Out of curiosity: why are you dumping the [javascript] modified code to the server. Why not pull a clean copy of the HTML from the URL?

    The only upside to dumping the actual DOM (that I can think of) is if the page in question is under restricted access…?

    • That was actually the primary reason. I’m often testing pages for work over VPN, which my server doesn’t have access to.

      Also, at the time I made this bookmarklet, I was developing a 100% AJAX page, targeting Google’s hash fragment crawling scheme. Here I needed the DOM, since the base page only contained an empty body tag.

      But I have considered adding a small control panel to the source-page, so you can request the “real” page instead, and perhaps also add line numbers and no-wrap etc.

  11. Pingback: Como ver el código fuente de una web en Safari desde iPhone o iPad | SomosIphone.com

  12. Pingback: You Can Now View the Source on the iPad and iPhone | Down 3 feet

  13. Hans Grimm says:

    This is what I was missing; sorely..
    THANKS!!!

  14. This is so cool, I hate to add a request, but here goes… :-)

    Along with the line numbers/no-wrap above, adding appropriate indents to the source would make readability much much easier…

    Cheers on a great bookmarklet!

    Atg

  15. Pingback: Ole Michelsen has created a View Source bookmarklet for the iPad… « 13fqcs

  16. Any chance support for scheme-relative URLs, e.g. //example.com/ can be added? Currently these links break in the source view.

    To fix this, you could simply replace // at the start of any URLs with http:// if the original page was served over HTTP, or https:// if it used SSL.

    Nice work!

  17. Pingback: Harvest Playback, April 7th Edition | HARVEST Time Tracking and Invoicing Blog

  18. Mark Perkins says:

    Thanks for this. I made a similar bookmarklet called Snoopy (http://snoopy.allmarkedup.com/) a while ago that will give you highlighted source code (both ‘actual’ and generated) on iOS browsers (without a server-side component), which may be of interest. You can’t follow the links like you can on this though :-)

  19. Steven says:

    Thanks so much. And totally easy. I went from my desktop to my devices in seconds! What a welcomed addition to mobile Safari! Excellent job.

  20. Pingback: How To View Page Source On Safari In An iPhone or iPad « TecHow

  21. Pingback: iPhoneやAndroidでページのHTMLソースを表示する方法 | ミニミニ大作戦

  22. Pingback: How to View Website Source Codes on iPad / iPhone [Quicktip] | FunWP.com

  23. Pingback: How to View Website Source Codes on iPad / iPhone [Quicktip]

  24. Pingback: How to View Website Source Codes on iPad / iPhone [Quicktip] | Best Web Consulting company in Nashik, India with Creative and Professional Website Design, Content Management Systems, Wordpress Experts, Ecommerce SEO, and more..

  25. Pingback: How to View Website Source Codes on iPad / iPhone [Quicktip] | Android News

  26. Pingback: Cómo ver el código fuente de una web en un iPad o iPhone | ceslava | diseño & cursos

  27. Pingback: Jasonmcdermott » On ‘View Source’ and mass creativity

  28. Pingback: Quellcode einer Webseite « iAppMag

  29. Pingback: How to View Website Source Codes on iPad / iPhone [Quicktip] | Indoor Digital Billboards

  30. Ben says:

    Hello!
    I just wanted to say thanks for this neat piece of code : I’ve been trying many apps but none of them were effective. I finally found your page and followed the very simple tutorial. Now, the viewing of the source code is made easier with the standard colors and it’s pretty quick. Thanks for your time and efforts.
    Ben.

  31. Pingback: 在手機和平板上觀看網站原始碼 | 超級電腦網

  32. David Giragosian says:

    Ole, I am wondering if you are logging the source code that is rendered when I use your resource?If so, would you please use my email to respond, and I can explain further.
    Thank you for your excellent work.

  33. Michael says:

    It’s really useful! Thank you very much!

  34. Gino says:

    Hi, i think it stopped working on IOS6
    It’ was usefull

    • olemichelsen says:

      Hi Gino, I have tested on both iPhone and iPad with latest iOS and it seems to work fine. Perhaps you should recreate the bookmarklet again?

  35. Pingback: The Dev Box : 22 November 2012 | Janes Oosthuizen

  36. Pingback: Web Developer Bookmarklets for iOS: Extending Mobile Safari

  37. JP says:

    Very good post, it’s very useful

  38. Pingback: Design.Development & Technology » Blog Archive

  39. Pingback: Mobile Marketing Conversion Optimization Tools & Code Tricks | Experts Bto

  40. Pingback: Techno Pizza: Viewing a sites source code on your iPad or iphone | virtual pizza

  41. Pingback: Truco: Ve el código fuente de cualquier página en Safari para iOS | MxApple

  42. Pingback: iPhoneでソースコードを見るためのブックマークレット | アンテナの外側から

  43. Koni says:

    It’s a perfect script and it worked for me until iOS6. Now I updated my iPhone to iOS7 and it does not work anymore :-( Any help or new script? Thanks!!

    • olemichelsen says:

      Looking into what has changed in iOS7, will update the article when I find a fix.

    • olemichelsen says:

      It seems that upgrading to iOS7 can modify your bookmarks. The bookmarklet script is still working though, so you just have to copy the code into your bookmark again (easiest to do on the desktop), and then it should work.

  44. David Evans says:

    Good stuff Ole.

    That’s also inspired me to make a bookmarketlet out of John Alsop’s Xray – http://www.westciv.com/xray/

  45. Pingback: Resources added to Diigo (weekly) | Beth Holland

  46. Pingback: Weekly Resources to kick of December! | Leading Change in Changing Times

  47. Pingback: 在 iPad和 iPhone的浏览器上查看网页源代码 - web前端 - 开发者

  48. Dexter0015 says:

    Really helpfull, many thanks, Great job!

  49. Daniel says:

    So, there is an error on the index.php (viewsource.php):
    Fatal error: Call to a member function get_stylesheet() on a non-object in /[...]/index.php on line 53 (= get_stylesheet(); ?>)

    The error is in the source of http://ole.michelsen.dk/viewsource/ too, but it isn’t shown. I tried to deactivate the error-reporting via. php.ini and .htaccess, without any success. Anybody an idea?

    • olemichelsen says:

      You need to install Geshi, which is included in the first line of viewsource.php:
      include_once('../includes/geshi.php');

      • Daniel says:

        It’s installed.
        GeSHi: /www/GeSHi/geshi.php
        ViewSource: /www/source/index.php
        In index.php: include_once(‘../GeSHi/geshi.php’);

        So, there is no error. And the same error is on your page (in your source).

        And Sorry for Spam.

        Regards, Daniel

        • olemichelsen says:

          Ah yes, you are right. This is some lazy coding on my part, which fails when calling the page directly without a POST (from the bookmarklet). I have pushed a fix to Github.

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>