iOS

Originally published April 6, 2012

How to view source code using a Safari bookmarklet script on an iPad or iPhone device.

As a web developer, I spent lots of time viewing source code. So a few days ago, a friend asked me to take a look at his company’s web site to see how they could improve their SEO ranking. My first actions were to grab my iPad, take a quick look at the user interface and then at the source code. It was then that I realized, I had no way to view the source code of any site on my iPad—I had always used my computer for that task. And so the search was on—for an app—a “view the source code” app. After spending several minutes surfing through the App Store and finding nothing worth the .99 gamble. I discovered a couple JavaScript bookmarklets on the web.
Awesome! This will work better than an app, since I will already be in the Safari mobile browser.

I made a mashup of the various code I found is posted below.
There are other scripts available that enable syntax highlighting, but I prefer to simply view the source code.
If you already know how to install and edit a bookmarklet on your iPad or iPhone, copy the code below and enjoy!

javascript:(function(){
var a=window.open('about:blank').document;
a.write('');
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))
})();

For step-by-step instruction on how to install this piece of awesomeness onto your iOS device, here goes:

Copy the code above (keyboard shortcut Cmd/Ctrl + C).

 

If you know CSS and prefer to change the background or text color, have at it. Note the style tag in the head section of the script.