What’s Under the Hood: 8 Ways to View Page Source on Your iPhone

Categories: Featured, iPhoneization, Resources, Tools
1 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...

As a self-taught web developer, I learned a lot of what I know by looking at other people’s source code. It’s unfortunate that I can’t do this on my iPhone with mobile Safari, at least not by default. That said, there are several methods you can use to view the source code of a site on your iPhone.

safari-icon.pngIn-Browser Methods

In-browser solutions simply allow you to navigate to a specific page and type in the url you wish to see the code for. I found two that worked well, one of which inspired the other:

bookmarklet.pngBookmarklets

Bookmarklets allow you to avoid a lot of unnecessary typing on your iPhone by letting you jump from any web page straight to its rendered source code.

  • Abe Fettig’s view source bookmarklet
  • Dustin Caruso’s view source bookmarklet

iphone.pngNative App Solutions

There will be times where you just want an app to do all the work for you. If your in one of those moods, you could use one of the following native apps.

  • Source-View

Source View is a handy way to view a website’s source code – just as you would with the “view source” command in a desktop web browser.

The source is presented in a easy to read font, and you can zoom and scroll in the display, just as you can in Safari.

  • View-Source

View Source enables you to view the source of web sites on your iPhone or iPod Touch, with the ability to set the browser type when getting the source and the functionality of emailing the source to anyone.

terminal.pngCommand Line Method

If you want to view the source of an iPhone optimized website using something other than your iPhone, you may navigate to the site and get “this page is viewable only on an iPhone” or something similar. Scott Barr discovered this when he tried to view the source of an iPhone specific RSS feed. To work around this, he used the following methodwhich uses the curl command in terminal:


7 Responses to “What’s Under the Hood: 8 Ways to View Page Source on Your iPhone”

  1. Jonathan Stark Says:

    Hi there -

    Great post! I wasn’t aware of any of these. You left off my favorite method though, which is to open the page with Safari on your desktop and then select Develop > User Agent > Mobile Safari 2.2.1

    Best!
    j

  2. Chris Says:

    Great point! I actually posted this very thing on one of my first posts of this site: http://iphoneized.com/2009/03/helpful-tip-use-safari-to-render-sites-as-iphone-agent/

    Cheers!

    Chris

  3. What’s Under the Hood: 8 Ways to View Page Source on Your iPhone | Design Newz Says:

    [...] What’s Under the Hood: 8 Ways to View Page Source on Your iPhone [...]

  4. Casey Jones Says:

    here is free Native App i made.
    Web Source Viewer
    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=313833572&mt=8
    how about this?

  5. Aaron Vegh Says:

    Hi there,
    Thanks for the fine article. I thought I’d throw in with my own source code viewing app, called Code. You can find out more about it at http://codeapp.ca. It uses a bookmarklet from Mobile Safari to open the syntax highlighted source view. It’s a universal app for iPhone and iPad. Just $1.99.

    Cheers!
    Aaron

  6. Free iPhone apps to ‘view source’ — WordPress.io Says:

    [...] A bit of a view source round up at iphoneized [...]

  7. iPhone “view source” bookmarklet with color coding | Frank Fiedler Says:

    [...] solutions are described here. I like the ‘pure bookmarklet’ approach most, as it is quite fast and uses the real [...]

Leave a Reply