Ever wanted to view source of a webpage from an iPad or iPhone? Unfortunately, mobile Safari doesn’t include the feature on it’s own and does not yet have a mobile web inspector toolkit built-in, but with the help of a custom bookmarklet you can view source of any web page right in iOS and iPadOS.

This article will show you how you can get set up so that you can view source in Safari for iPad and iPhone by using a bookmarklet and javascript trick.



How to View Source in Safari for iPad & iPhone

Open Safari if you have not done so already Bookmark this web page (or any other) with Safari on an iPad, iPhone, or iPod touch and name the bookmark as “View Source” Click here to view the bookmarklet javascript and then choose to Select All -> Copy Tap the Bookmark icon at the Safari new browser screen and tap on “Edit”, then tap the bookmark you saved in step 2 Paste the javascript code you copied in step 3 into the URL bar, and then save the changes to the bookmark by tapping “Done” Now when you want to view a web pages source on iPad or iPhone, open the Bookmarks menu and select “View Source” The source code will appear in highlighted syntax with clickable source URLs

One important thing to note is that the javascript being used here sends the page you are viewing source to over to the michelsen.dk server for processing. If you’re not comfortable with that there are other solutions out there, but they won’t highlight the syntax and aren’t nearly as elegant overall.

For example, you can use the Javascript below as a bookmarklet to view source as well which will not process through a remote server, but it does not use syntax highlighting:

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))})();

A similar tip utilizes an edited bookmark to let you run Firebug with Mobile Safari on an iPhone or iPad too, which may be a bit more useful for some web developers.

This awesome tip comes from Michelsen.dk. Found via Twitter, you can follow us there too

Who knows, maybe one day Safari in iOS and iPadOS will get a native ability to view source? Until then, you’ll have to rely on this party apps or tools like this.

This worked fine in testing but some users report different results on various later versions of Safari and iOS. Let us know in the comments below what works for you and what iOS version and iPad or iPhone you are using.