2ladd

Viewing the source code of a webpage in Safari

The source code of a website often contains useful data. It requires a little detour in Safari to view it.

Posted

in

Things that are often useful to web developers are often found in a website’s source code. Safari does not show HTML code, CSS instructions, and other similar markup by default because it can be overwhelming to new users and is not useful to most people.

How do you view HTML source code in Safari?

The first step of being able to see a website’s HTML code is to enable Develop mode, a mode that Apple previously disabled by default because it assumed that only developers would want to mess with such settings.

Enable Develop mode in Safari

  1. Click Safari > Preferences from the top menu bar, or open Safari and press Command + comma (,).
  2. Go to the Advanced tab.
  3. At the bottom, check the box that says Show Develop menu in menu bar.
  1. In the menu bar, you will now see a new tab called Develop.

Show page source code

Once this developer mode has been activated, there are three methods to view a web page’s source code:

  1. Open the website and choose Develop > Show Page Source from the menu bar.
  2. Press the Option + Command + U keys at the same time on the web page for which you want to view the source code.
  3. This is most likely the simplest method. Select Show Page Source by control-clicking or right-clicking on a blank section of the page.