How to view webpage HTML source codes on iPad / iPhone. No app required.

0
79








One of the frequent reader questions we see is how to view HTML source codes from ANY webpage on an iPhone (or another iDevice–iPad or iPod Touch.)  Luckily, we have a solution thanks to Developer Rob Flaherty! This article outlines the steps required to view the source code (HTML, CSS, JavaScript etc) for any webpage on your iDevices including iPad, iPhone or iPod touch. And best of all, no app required! How to view webpage HTML source codes on iPad / iPhone. No app required.

Related Posts

How to View HTML source codes on iDevices

8 Easy Steps to view HTML source codes

1.Tap Safari (iPhone, iPod, or iPad), if it is not already open, and visit this page. This also works for Chrome.

2.Select the Share Button (also known as the Action button):Safari Tap

3.Tap Bookmark:safari bookmark

4.Choose the Name Field and hit the X icon to clear it and name it “Show Page Source” and then tap “Save”.Show Page Source

5.Now visit this page and select all and copy the javascript code: (code credit: Rob Flaherty)copy code

Make sure the code you copy from Rob’s site is exactly the same as this:

javascript:(function()var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');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)))();

6.Tap the Bookmarks icon and tap Edit:edit safari bookmarks

7.Tap the “Show Page Source” bookmark you just created in step # 4:edit show page html css source bookmark

8.Tap the Address Field and hit the X icon to clear it, then paste the javascript code you copied in step # 5; then tap Done.copy code bookmark

You’re Done! Now you can use go to any webpage using mobile Safari (and Chrome) on your iDevice (iPhone, iPod, or iPad), tap the Bookmarks icon then tap the Show Page Source bookmark and a new window opens displaying the source code of the webpage. Awesome and Easy!

End Results to View HTML source codes

show page sourcesee HTML code of a site

LEAVE A REPLY

Please enter your comment!
Please enter your name here