View Page Source — For iOS!

One of the frustrations for me, being a coder and all that, is the inability to “View Page Source” of a website from my iPad. Today I’m going to show you how to fix this annoying issue — legally and completely for free, no hacking, jail breaking, or anything similar involved. It’s as simple as copy + paste!

Step 1: Go to any website, any website at all. For this demonstration I’m using Google.

Google

Step 2: Bookmark whatever website you’re using.

Bookmark Website

Step 3: As you bookmark the site, delete the name and change it to, “Show Page Source.”

Change Name

Step 4: Once you’ve saved the bookmark, go to your bookmarks tab and tap “Edit.”

Tap Edit

Step 5: Tap on your “Show Page Source” bookmark. Delete the URL and paste in the following:

javascript:(function()%7Bvar%20a=window.open(‘about:blank’).document;a.write(‘%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20’+location.href+’%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E’);a.close();var%20b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();

(Be sure to copy the “javascript:” part!)
Then tap “Done.”

Paste In JavaScript

Step 6: Now you’ve saved the bookmark with this special JavaScript URL. Now go to any website (it can be the same as the one you used for the bookmark or different, it doesn’t matter). I’m going to use my website for this one.

Handz Studioz

Step 7: Go to your bookmarks and tap on the “Show Page Source” bookmark.

Tap Bookmark

Safari will open a new tab with the page source for whatever site you are currently on when you tap the bookmark.

View Source

So now you’re done. You only have to do this one time. From now on when you want to view the source of a page, simply visit the website and click on your “Show Page Source” bookmark.

Thanks for visiting Handz Studioz and be sure to follow to be notified of future posts! Check out the External Links section (below) if you want to see the site where I first heard about this tip!

-The Editor.

External Links and Credits:
JavaScript credit: Rob Flaherty
Original tutorial: http://appletoolbox.com/2014/03/how-to-view-webpage-html-source-codes-on-ipad-iphone-no-app-required/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s