iPad View Source Bookmarklet

By Rob Flaherty

April 26th, 2010

7 comments

Recent Posts

For a few years I’ve been using this little bookmarklet, written by Abe Fettig, on my iPhone to view page source in Mobile Safari. It works well, but unfortunately the output is not optimized for viewing on the iPhone. Because I use the bookmarklet so infrequently, it’s never really bothered me.

Then I installed the same bookmarklet on my iPad. I found myself using the iPad to browse the web more often, and more often wanting to click view source. Quickly the poor screen formatting became enough of a nuisance to motivate me to spend a few lines of code fixing it.

Here’s an example of the source produced by Abe Fettig’s original bookmarklet (on the iPad):

Original View Source

It takes a lot of zoom pinching to get the text to a legible level. Here’s an example of what the improved version displays:

New and Improved

Revised iPad View Source Example

Much better. To do it I made two small additions (and a few tweaks) to the original. One, I added a viewport meta tag, setting the width to device-width. And two, I added overflow:auto and white-space: pre-wrap styles to the pre element wrapping the displayed source code. Behold:

Improved Bookmarklet Code

javascript:(function(){
    var w = window.open('about:blank'), 
        s = w.document;
    s.write('<!DOCTYPE html><html><head><title>Source of ' + location.href + '</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');
    s.close();
 
    var pre = s.body.appendChild(s.createElement("pre"));
    pre.style.overflow = 'auto';
    pre.style.whiteSpace = 'pre-wrap';
    pre.appendChild(s.createTextNode(document.documentElement.innerHTML));
})();

If you already know how to install a bookmarklet in Mobile Safari, here’s the raw code. Have fun.

For the rest of you, who might be thinking, “how do I get this teh hotness onto my business?”, worry not. We’ve got you covered. It’s like this…

How to Install a Bookmarklet on Mobile Safari

Navigate to this page on your iPad and select “Add Bookmark”. Change the name of the bookmark to “View Source” or whatever you like. Tap “Save”.

Next, copy the bookmarklet from here. (Select All > Copy.)

Lastly, go to your bookmarks, tap “Edit”, select the bookmark you just created, and replace the URL by pasting in the new code. Tap “Done” and you’re done.

A few things:

The source you’ll see is the DOM source (“generated source”), not the original HTML source.
The ends of some very long strings are partly hidden from view.
It works well on the iPad but on the iPhone the text wrapping does not work as well (the ends of more lines are cut off).
It should work in any browser that supports the white-space value pre-wrap. But I’ve only tested on iPad, iPhone, and Opera Mini on the iPhone.
For some reason the source code output is not fully selectable. You can Select All but you cannot define segments to select.

If anyone knows of a better solution, or has any recommendations to improve this one, please let me know. You can also fork the gist on github.

Discussion

Aaron Vegh
April 26th, 2010

Hi Rob,
I had the same problem, but I decided to write an app to handle it. It uses a bookmarklet to load the current web page into my app (called Code), and it displays the source with syntax highlighting. It’s a universal binary for iPhone and iPad, and it’s two bucks. http://codeapp.ca.

Cheers!
Aaron.

Ravelrumba