How to “View Source” from Safari on an iPad or iPhone
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.
Oooof, MAJOR security risk. This is essentially cross site scripting. I suspect Google Chrome would now flag this as a vulnerability at runtime.
Thanks * 3000000
Try this app: https://itunes.apple.com/us/app/view-source/id1041817284?mt=8
Didn’t work for me!
Interesting trick, but this farms out the source generation to an outside site, apparently losing all dynamic device-specific content.
thank you this is very helpful
Thank you So Much! Works beautifully you’re the best!
Good hack. If you want it to display the enclosing tags, change ‘innerHTML’ to ‘outerHTML’ in the bookmarklet. otherwise it will display only the head and body tags and all their contents.
I needed to be able to see the html tags specifically on the iPad, because of a library I was using that dropped classes into the html tags based on the type of browser and device, in order to verify that it was working.
Nice trick! But, …
There’s easier way. App store has the app called “HTML Viewer”. It’s free and you can switch the site any time. Search tool is included as well.
[…] way to add functionality to Safari that otherwise is impossible, allowing you to do things like “View Source” from Safari in iOS, adjust font sizes of web pages, and even run Firebug lite in iOS. This particular one has circled […]
It’s much easier to use this “view source” app…
https://itunes.apple.com/us/app/view-source-html-javascript-and-css/id917660039?mt=8
It is generally regarded as the best of breed, has a couple of nice features.
Hope this helps.
iPhone safari bookmarks don’t recognise the curly brace character in the JS, and it’s not available via editing. What to do?
[…] it with a javascript that changes on page behavior, similar custom bookmarklets have allowed us to View Page Source in iOS Safari and even use Firebug on […]
Here’s the PHP code if you want to host this yourself
http://ole.michelsen.dk/blog/wp-content/uploads/2011/07/viewsource.txt
You need GESHI installed too (syntax highlighter)
http://qbnz.com/highlighter/
this works on Android devices too
Is very cool I like it a lot
I found this one and it works:
javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘Source of ‘+location.href+”);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))})();
I use snoopy which is a variation on this idea http://snoopy.allmarkedup.com/
It should be built into iOS, but this is yet another reason that iOS isn’t ready for serious work and further proof it’s a consumer OS built for consumption, not for work.
“It should be built into the iOS..”
Who determines what “should” be built into the iOS? I think there are plenty of things that I think “should” be included in iOS that aren’t, but that hardly gives the argument that iOS isn’t ready for serious work. I’m certain that many of the individuals that use it for Enterprise would disagree with you.
Hmm. View Source on a browser page (Safari being one of a gazzilion apps out there) as a “not one click away” feature means that iOS isn’t ready for serious work? Two different products. Plus, you CAN see the source by using the tip outlined above … with Safari and iOS.
Are you wanting to use your iPad to develop websites? I normally use my Mac, then test on the iPad by clicking refresh.
Well said, Hana.
Fradrock you’re right, but you’re also wrong.
I use my mac to develop websites, but a lot of the time, I’m not at home to use it, and don’t have a MacBook, yet, so I want to use my ipad.
I found a fantastic little app called Textastic that works just like dreamweaver – allows me to code, highlights each different language correctly, shows errors in code and allows me to control uploads and downloads via FTP. Is it wrong to want to be able to view the source code natively as well? After all, they do advertise the ipad as a replacement to a laptop – it’s not, it’s more of a complement, but that’s how they advertise. Chengduflu is wrong in saying that its not ready for work.. It is, but there will always be outlying cases that aren’t happy with what they have, and demand more.
Hans – Apple say what is and isn’t included.
Well, it’s not working for me.
I agree – cute toy, not a serious tool