15

I thought there'd be an easy way to do this, but I may have been wrong.

How can I view the source for a web page using Safari browser on an iPhone?

0

4 Answers 4

11

You don’t need an app to inject a view source share option.

Create a bookmark in mobile Safari and then edit it to include

javascript:(function()%7Bvar a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>Source: '+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))%7D)();

When you are on a page and select this “bookmark” it transforms the page and opens up a new tab with most (anything inside <head> or <body>) of the source code from the current web page.

2
  • 1
    I don't understand how this works, but it works!
    – stevec
    May 13, 2022 at 0:57
  • 3
    @stevec It just run a JavaScript function on the currently open web page. The function just grabs all the source code and pastes it as text into a new "web page" that it then opens. You likely already know this, but others here might not: JavaScript is a programming language supported by web browsers to manipulate web pages. Hence Safari has in-built support for JavaScript functions. Allowing JavaScript in bookmarks is helpful because it allows bookmarks to perform operations on the loaded web page, hence major browsers support it.
    – T. Davies
    Aug 26, 2022 at 19:18
6

With iOS14 and above you can make shortcut using these actions : enter image description here

2
  • 5
    There’s now a View Source shortcut in the Shortcuts app Gallery section, with somewhat expanded capabilities (share & save in particular).
    – JLundell
    Sep 1, 2021 at 16:02
  • Great solution that really helped me! Use the Shortcuts View Source in Gallery the gallery as boilerplate, then remove the last few actions actions by removing the parent "Choose from menu with:" action (which in turn deletes it's sub-actions). The last step ends up being Show in Quick Look. It feels native, except dismissing once complete. Awesome :) Oct 6, 2022 at 15:54
4

Mobile Safari can call other programs to "View Source" via the share functionality in iOS / iPadOS.

To transform your web page into source, install an app that has this functionality (e.g. View Source - HTML, JavaScript and CSS), click the share button in the middle of screen footer (the icon depicts an arrow out from a square). This will open new overlay window where one can find:

enter image description here

And for current webpage one can see:

enter image description here

8
  • 2
    Hrpmf. For whatever reason I don't have that option, not even when I scroll all the way down and open the "edit actions" screen :-(
    – nohillside
    Feb 7, 2021 at 14:21
  • 1
    I wonder which app injects the view source functionality into the share system. I have View JSON since I have an app named Jayson installed but no view source on any of my iOS devices. PS - this is gonna be a great answer - thanks all for collaborating and sharing. My answer isn’t nearly as convenient as identifying a shortcut for this.
    – bmike
    Feb 7, 2021 at 14:45
  • Aivar, do you have a shortcut installed for this?
    – nohillside
    Feb 7, 2021 at 14:51
  • 3
    I checked other iPhones in my household and can confirm that none of them had View Source. So this is not something visible/available by default. I will try to identify what app/setting made this option appear and then update my answer Feb 7, 2021 at 14:55
  • 1
    @nohillside - you are correct. I installed it years ago and forgot it (I needed it for one specific reason over short timespan). This option have been there so long that in my mind it transformed into something available by default. Feb 7, 2021 at 17:31
3

Apple’s native solution is Safari Web Inspector. Currently all developer tools for iOS do still run on macOS so get out your mac and dive in if you want a first party solution.

Here’s a 5 minute tech talk, but the developer site has hours and pages of content depending on what you are going to do with this.

To enable on the iPhone - use the setting app, Safari, Advanced

iPhone iOS 14 Safari web inspector toggle

2
  • Is this option gone on iOS 14+?
    – trebor
    Jul 1, 2021 at 16:50
  • 1
    @trebor nope it's under "Advanced" just as shown above. Today in 2023
    – twobob
    Jun 2 at 8:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .