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.
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”
- Tap the Bookmark icon at the Safari new browser screen and tap on “Edit”, then tap the bookmark you saved in step 2
- 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
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…
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?
Here’s the PHP code if you want to host this yourself
You need GESHI installed too (syntax highlighter)
this works on Android devices too
Is very cool I like it a lot
I found this one and it works:
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