iPad View Source Bookmarklet
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
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
white-space: pre-wrap styles to the
pre element wrapping the displayed source code. Behold:
Improved Bookmarklet Code
If you already know how to install a bookmarklet in Mobile Safari, here’s the raw code. Have fun.
Or if you want to add the bookmarklet to your desktop browser and then sync to your iPad, drag this link to your bookmarks bar: iPad View Source.
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
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.