January 13, 2023 at 10:34 a.m. PST
- Over the years, Apple has made it difficult for users to access HTML and javascript source code on web pages.
- With iOS and iPadOS, users can use an app or a javascript-enabled bookmark to view HTML source code.
- macOS Ventura hides developer tools by default, complicating source code access with Safari.
- Changing Safari’s settings allows one to add developer tools, including access to HTML and javascript source code on any web page.
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.
View HTML Source on Your iPhone for Free Using a JavaScript Trick
HTML is a host markup language. There are usually other languages embedded in HTML source. JavaScript is a ubiquitous technology embedded in just about every web page. It breathes life into web pages, allowing them to be dynamic without constantly reloading the entire page. JavaScript can also help you view the HTML source of a web page, using a neat trick developed by Ole Michelsen.
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.
Next, copy this JavaScript code:
javascript:(function(){
var w = window.open('about:blank'),
s = w.document;
s.write('');
s.close();
var f = s.body.appendChild(s.createElement('form'));
f.setAttribute('method','post');
f.setAttribute('action','https://ole.michelsen.dk/viewsource/?uri='+location.href);
var i = f.appendChild(s.createElement('input'));
i.setAttribute('type','hidden');
i.setAttribute('name','DOM');
i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));
f.submit();
})();
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.
Now paste the JavaScript code into the address field and tap Save on the top right.
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.
As you can see this is a clever kludge, but a kludge nonetheless. It’s not as elegant as the View Source app and doesn’t offer color coding options. If you email the source code, you just get a link, not the source code, unlike the View Source app. View Source is also much faster than the JavaScript trick. This trick depends on a web application running on the ole.michelsen.dk server. If the server is offline or he decides to remove the page, it won’t work.
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.
That’s it. Now you can view any web page’s HTML and javascript code by right-clicking on the page. You can also view a page’s source code by pressing option + cmd + U on your Mac’s keyboard. If that’s not enough, you can access a page’s source code by clicking on Develop in the top menu bar, then select Show Page Source from the menu.
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.