Source Code Safari

There are people out there who like to see what’s under the hood of webpages they visit. Whatever your reasons might be for that, there is a few simple steps that allows you to see the HTML source code of a website in Safari for Mac. In this post, we’ll show you how to enable Develop mode in Safari in order to view the source code of a webpage.

How do you view HTML source code in Safari?

The first step to being able to see the HTML code of a site is to enable Develop mode, a mode that Apple hides by default as the company assumes only developers would want to tinker with these options.

How to enable Develop mode in Safari:

Step 1: With Safari opened, go to Safari > Preferences in the Menu bar.

Step 2: Go to the Advanced tab.

Enable Develop mode Safari

Step 3: At the bottom, check the box that says Show Develop menu in menu bar.

In your Menu bar, you will now see a new tab called Develop.

How to show page source code:

Now that we have enabled this developer mode, we can access the source code of a webpage in three different ways.

Option 1: On any webpage, go to Develop in the Menu bar, and select Show Page Source.

Option 2: On the webpage for which you want to see the source code, press the Option/Alt + Command + U keys simultaneously.

Option 3: This is probably the easiest option, simply make a right click on the page, and select Show Page Source.

When performing any of these actions, the source code of the page will then appear in a new window. From there, you can inspect all you want.

  • Best way to test CSS is with the Inspect Element feature. Can manipulate it and then commit it to your build when perfected!