How To View Source In Safari

Viewing a web pages source code in Safari, and other web browsers, is a fairly routine activity for many people who work with the web for a living or even as a hobby. Unlike some other browsers, to view page source in Safari you must first enable a developer toolset for the browser to be able to access the view web page source feature.

This tutorial will demonstrate how to view a web pages source in Safari on Mac OS. This applies to all versions of Safari and MacOS.

How to View Page Source in Safari for Mac

Here is how you can view a web pages source in Safari on MacOS:

First, enable the Safari Develop menu by going to the Safari menu, choosing "Preferences", going to "Advanced" and checking the box to enable the developer menu

Next, in any Safari window, navigate to the web page whose source you wish to view and inspect
Pull down the "Develop" menu at the top of the screen and select "Show Page Source" from the menu options

How to view page source in Safari on Mac

The web web pages source will appear on screen in the web inspector Sources section, a web developer toolkit built into Safari

Viewing page source in Safari for Mac

Aside from viewing page source, you can also use the Develop menu to accomplish many other web useful tricks and developer tasks, including disabling Javascript and clearing Safari cache amongst myriad other functions and capabilities that are geared towards advanced users and developers, like finding embedded files in pages.

How to View Page Source by Keyboard Shortcut in Safari on Mac

After you have the Develop menu enabled in Safari, you can also use a keyboard shortcut to quickly view any web page source in the Safari browser for Mac:

Navigate to the web page you wish to view the page source for
Press Command + Option + U keyboard combination to view the page source

The keyboard shortcut for viewing page source will open the web inspector tool, just like accessing it from the Develop menu.

If you're an advanced user of Safari, enabling the Develop menu is likely one of the first things you do when you launch the browser for the first time.

For what it's worth, the Chrome browser and Firefox browsers also have similar web element inspector capabilities, but obviously we're focusing on Safari for Mac here.

The Developer functions in Safari for Mac are not available for iPhone or iPad (yet anyway), but if you're interested in gaining source viewing options on the mobile side you can use this javascript trick to view page source in iOS and ipadOS versions of Safari.

Do you have any handy tips or tricks associated with viewing page source or the developer toolset in Safari? Share your thoughts, tips, and experiences with us in the comments.