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).
- Step 1: Create a new bookmark via the Add New Bookmark function at the bottom of your iPad/iPhone screen.
- Step 2: Name the new bookmark something that makes sense, like “View Source”, “Source Code” or whatever you like.
- Step 3: Note where you are saving the Bookmark, e.g., Bookmarks, Bookmarks Bar, etc., then click Save.
- Step 4: Open your Bookmarks (the icon that looks like a book)
- Step 5: Click “Edit” in the lower left corner of the screen.
- Step 6: Click on the newly added Bookmark that you named.
- Step 7: Select the url and delete it, by pressing the “X” to the right. (The “X” will appear after you click on the url).
- Step 8: Paste (keyboard shortcut Cmd/Ctrl + V) the JavaScript into the address field and click save.
- Step 9: Enjoy!
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.