View Source of a web page on iPad, iPhone or iPod Touch (using mobile Safari)

After recently implementing WPTouch Pro for mobile devices, I was curious to know what HTML it generated when viewed from my iPhone and iPad. Surprisingly the mobile Safari browser does not have an option to view source, even more surprising is that I’ve just found this out after owning a iPhone for over 3 years!. This little guide shows you how to view the source code for the HTML, CSS and JavaScript code of a web page from Safari on the iPad, iPhone or iPod touch.

This simple bookmarklet is a piece of JavaScript code saved as a bookmark. When you want to see the source of a web page, just click the bookmark and the source of the page is displayed.

javascript:(function(){
    var w = window.open('about:blank'),
        s = w.document;
    s.write('');
    s.close();
    var f = s.body.appendChild(s.createElement('form'));
        f.setAttribute('method','post');
        f.setAttribute('action','http://resource.grapii.com/files/viewsource/?uri='+location.href);
    var i = f.appendChild(s.createElement('input'));
        i.setAttribute('type','hidden');
        i.setAttribute('name','DOM');
        i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));
    f.submit();
})();

View Source (click to try)

Step 1.

Visit this page using Safari on your iPad, iPhone or iPod touch.

Step 2.

Tap the Share button and select Add Bookmark from the popup menu.

Step 3.

In the title field, enter View Source. Leave the address field as is for now, and tap save.

Step 4.

Using your touch selection skills, copy the following JavaScript code to the devices clipboard (this is a condensed version of the code above)

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://resource.grapii.com/files/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()})()

Step 5.

Tap the Bookmarks icon and then edit. Find the View Source bookmark in the list and tap the right arrow to get the bookmark details. Now tap on the address field and hit the X icon to clear the existing entry. Tap and paste the JavaScript code from the clipboard (Step 4).

Step 6.

Tap the Bookmarks navigation item to save the changes.

All Done.

Simply visit any web page, and if you want to see it’s source code, tap on the Bookmarks icon and select the View Source bookmark.

Note that the source shown is the generated DOM, and not the original HTML. These might differ depending on the amount of JavaScript used on the page.

Alternative View Source code

You could use this code for the bookmarklet instead, described by , which is “pure” but doesn’t include the highlighted syntax, clickable links or selectable text.

javascript:(function(){
    var w = window.open('about:blank'),
        s = w.document;
    s.write('<!DOCTYPE html><html><head><title>Source of ' + location.href + '</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');
    s.close();

    var pre = s.body.appendChild(s.createElement("pre"));
    pre.style.overflow = 'auto';
    pre.style.whiteSpace = 'pre-wrap';
    pre.appendChild(s.createTextNode(document.documentElement.innerHTML));
})();

Copy & Paste the following for the alternative View Source code:

javascript:var%20sourceWindow%20%3D%20window.open%28%27about%3Ablank%27%29%3B%20%0Avar%20newDoc%20%3D%20sourceWindow.document%3B%20%0AnewDoc.open%28%29%3B%20%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%20%2B%20document.location.href%20%2B%20%27%3C/title%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%20%0AnewDoc.close%28%29%3B%20%0Avar%20pre%20%3D%20newDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%20%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

View Source (click to try)

11 comments

  1. If I needed evidence that tablet computers are media consumption toys, this is it.

    A good idea – well done – but nobody doing serious work on an iDevice, etc., could contemplate these sort of botches and workarounds for anything but the shortest / most trivial tasks. Another example of why I find myself saving actual work to do on an actual computer, rather than a tiny piece of glass which I can dab with my fingers, halving the already small screen space whilst I do so.

    Media consumption: tablets great.
    Actual work: tablets rubbish.

  2. I would love to try this but I can not select anything on your page – not the code, not even the text outside the box with the code in it. And yup, I know how to copy and paste on my iPad. Surely I am missing something pretty simple?!

  3. It works! Even an extreme non-techie like me figured it out after a couple attempts. Thank you!
    A Reader: No one cares what you think. :)

  4. Javascript bookmarklets. I like. Here’s another few. This one allows you to change the content of what’s written on any page, but only to your own viewpoint. It don’t change the website itself. Useful if that stupid annoying ios thing that don’t let you copy paste. I’ll make it easy as I can.

    a dash separating linespaces makes things easier to select on a tablet, just so it’s eaier for you I hope. If the word “textarea” is visible anywhere, it is not part of the code, don’t copy it. Neither is “pre” in pointy brackets either.

    -

    -

    javascript:document.head.contentEditable=’true’; document.body.contentEditable=’true’; document.designMode=’on’; void 0

    -

    This one disables a pages Cascading Style Sheets (arranges the borders different, and stops anoying floating adverts that follow the page.) I prefer the term “Kill CSS” to “disable cascading style sheets” and I like saying “charlie 2 sierra down, repeat charlie 2 sierra down. The divs are everywhere, over!” in my mind. I imagine it’s like I’m saying it into a walkie talkie. In my head it’s awesome, so, I don’t care think what you like! Anyway, here’s the code:

    -

    -

    javascript:void(obj=document.getElementsByTagName(‘style’));for(i=0;i<obj.length;i ){void(obj.disabled='true')}void(obj=document.getElementsByTagName('link'));for(i=0;i<obj.length;i ){void(obj.disabled='true')}void(theTags='a,abbr,acronym,address,applet,area,b,base,basefont,bdo,big,blockquote,body,br,button,caption,center,cite,code,col,colgroup,dd,del,dfn,dir,div,dl,dt,em,fieldset,font,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,i,iframe,img,input,ins,isindex,kbd,label,legend,li,link,map,menu,meta,noframes,noscript,object,ol,optgroup,option,p,param,pre,q,s,samp,script,select,small,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,title,tr,tt,u,ul,var');theTags_array=theTags.split(',');for(loop=0;loop<theTags_array.length;loop ){void(theDokk=document.getElementsByTagName(theTags_array[loop]));{for(loopCount=0;loopCount<theDokk.length;loopCount ){void(theDokk[loopCount].removeAttribute('style'))}}};

    -

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>