January 13, 2023 at 10:34 a.m. PST
- macOS Ventura hides developer tools by default, complicating source code access with Safari.
Developers love to look at code. Whether it is your own code or someone else’s, it is often essential to fixing problems, deploying solutions or learning new skills. Unfortunately, if you are on your iPhone, iPad or iPod touch, this isn’t easily accomplished. To make matters worse, Apple keeps hiding developer tools, such as viewing html source code, from lay people.
Some may erroneously attempt forwarding a website’s URL from their iPhone to their computer, but they won’t see the mobile version of the site. There are quite a few workarounds, but wouldn’t it be great if you could just view the source on your iPhone? You can.
There are actually a few ways to accomplish this. With a little effort, you can do it for free, but it is a bit of a kludge. If you are willing to spend $1 for an app (with a Safari Extension), you will get better results.
View HTML Source on Your iPhone With the View Source App
The View Source app is the best and easiest way to view HTML source using Safari. The standalone app isn’t that handy. It requires the user to type or paste the URL. With iOS 8, Apple introduced Extensions, which allow apps to embed functionality within other apps. The View Source Safari Extension is by far the best way to view the source code of a web page.
It doesn’t take a degree in computer science or applied math to get this working. Simply go to the App Store and install the View Source app. The app only costs $1. Once installed, the Safari Extension is available. To view the source of a web page, simply tap on the share button and then tap on the View Source button.
The color-coded HTML source code will appear.
View Source offers a few more features. One can toggle between views of assets, the document object model (DOM), script and info. Sharing the source code directly from the Safari Extension is effortless. You can also configure eight different color coding modes. Not bad for a buck.
There are other apps and browsers in the App Store that can display HTML source code. View Source is the cheapest and highest rated app. If $1 is too expensive and your free time is cheap, there’s a free way to view source code.
First, add this page to your Bookmarks by tapping the Share button on the top right of Safari.
Tap Add Bookmark and name the Bookmark “View Source”, then tap Save.
var w = window.open('about:blank'),
s = w.document;
var f = s.body.appendChild(s.createElement('form'));
var i = f.appendChild(s.createElement('input'));
Tap on the Safari address bar to display the panel of favorites and bookmarks. Hold your finger on the View Source bookmark you just created until it expands, then release your finger and tap on Edit.
That’s it. Whenever you need to view the source of a web page, simply launch the View Source Bookmark, and you will see the source code.
I’d like to say, “you get what you pay for”, but the View Source app is a remarkable deal. Nonetheless, the frugal coder can also enjoy the ability to view HTML source on any iOS device. This trick will work on your iPhone, iPad or iPod touch.
How to View HTML Source Code on Safari for macOS Ventura
Apple continues simplifying macOS, making it more like an iPhone. Part of this streamlining involves hiding developer tools from the masses. To this extent, Apple made it difficult to view HTML source code in Safari with its latest macOS Ventura operating system.
Apple only offers “view source” if developer mode is enabled. Once activated, you can right-click on any web page and view its HTML source code. Here’s how to do it:
- Launch Safari on macOS Ventura. A new Safari window appears.
- Click on Safari in the top macOS menu bar. A menu appears.
- Click on Settings. The Safari Settings control panel launches.
- Click on the Advanced tab. The Advanced tab appears.
- Click on “Show Develop menu in menu bar” to appear checked.
- Close the Settings control panel by clicking on the red button on the top right.
Personally, I prefer the right-click method, but you need to click on an empty part of the page. With dense and crowded web pages, your best bet is to use the keyboard shortcut or Safari menu to view source.