View the Source Code of Mobile Devices

Do you need to know what you mobile website is producing, but on the phone itself? Then here are the best ways I have found to inspect you mobile phone or tablets HTML. I have found how to inspect the HTML source of multiple platforms including iPhone, Android and more.

iOS (iPhone/iPad)

Let’s start with the best one and that is the iPhone and iPad. This only works on these devices and is totally worth it. Start by bookmarking the page you are on and calling it ‘View Source Code’ or what ever you want to call it.

Once you have it bookmarked, copy the JavaScript below into you clipboard. Now go to the bookmark you just created and edit the URL. Delete the URL currently in the field and overwrite it with the JavaScript you just copied.

javascript:(function(){var d=window.open(‘about:blank’),a=d.document;a.write(‘<!DOCTYPE html><html><head><title>Loading Source</title></head><body></body></html>’);a.close();var b=a.body.appendChild(a.createElement(‘form’));b.setAttribute(‘method’,’post’);b.setAttribute(‘action’,’http://ole.michelsen.dk/viewsource/?uri=’+location.href);var c=b.appendChild(a.createElement(‘input’));c.setAttribute(‘type’,’hidden’);c.setAttribute(‘name’,’DOM’);c.setAttribute(‘value’,encodeURIComponent(document.documentElement.innerHTML));b.submit()})()

Now when you go to a website you want to view, simply select the ‘View Source Code’ bookmark and a new tab will open with your HTML in.

Android

Another one I have found for Android is much simpler, but has not been fully tested by myself as I am an iPhone user. If you copy the code below into you clip board, then paste it in the address bar of the website you wish to see the source code of.

javascript: alert(document.getElementsByTagName(‘html’)[0].innerHTML);

Once loaded you should be able to see the HTML source of that page. This method is simpler than the iOS, but you will have to have this snippet saved somewhere to keep entering it.

Through the code

If you have access to the code then you can simply add the above code in the JavaScript tag to alert the HTML, but it doesn’t work that well. If you alert the whole HTML then it shows you as much as it can, but as there is so much HTML it doesn’t show everything.

 alert(document.getElementsByTagName(‘html’)[0].innerHTML);

Windows Phone

I have not found a way to view the source code on a Windows Phone yet, but if anyone knows then please comment here to help others.

Advertisements

Leave a message please

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