Suppose you are browsing using the Safari web browser in your iPad or iPhone and you want to see the HTML source code of a website. Unfortunately, the Safari browser doesn't have an inbuilt option to view the source code and you would have to switch to your computer in order to see it.

Here's a cool trick that would allow you to view the source code of a website directly in your iPad or iPhone browser -

View source in iPad

Setting up The View Source Bookmark.

The trick here is to setup a bookmark that would run a small piece of javascript code which will extract and display the source code of the page for you.

  1. Open any website using their Safari browser on your iPhone or iPad. Then tap on the "Add Bookmark" button just next to the address bar. You can name the bookmark as "View Source" and save it.

    Add bookmark iPad

  2. Now tap on the bookmark button on the top left, click on edit and select the "View Source" bookmark we just created.

    Edit bookmark iPad

  3. Copy the below code and paste it in the URL field of the bookmark and tap on "Done".
    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
    Edit bookmark in iPad

View Source code in iPhone and iPad.

Now when ever you want to see the source code of any website, just open it in Safari and tap on the "View Source" bookmark.

Source code of website in iPad

The above javascript code for the bookmark just shows you the source code without any formatting. If you would like to view the source code in a better way, use this code instead of the one above. 

javascript:(function(){var d=window.open("about:blank"),a=d.document;a.write("Loading Source");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()})()

This one sends the URL to an external server for processing and shows you a color formatted version of the HTML source code.

Source code of website in iPad