How to View Webpage Source CSS and HTML in Safari Mac?

Safari is the default browser in Mac used by mere 3.7% of the Internet users. Apple claims users can browse 2 hours more and view Netflix videos 4 hours more with Safari compared to Chrome or Firefox. There are also lots of new features introduced like pinning a tab and muting audio from the tab. But as a developer or web site owner you may need to look for the source code frequently and in this article we will explore how to view webpage source CSS and HTML in Safari.

Enabling Developer Menu

By default the developer options are disabled in Safari which means you will not see the “Develop” menu, “Inspect Element” when right clicking and the whole developer console options. Launch Safari and navigate to the menu “Safari > Preferences… > Advanced Tab” and enable the option “Show Develop menu in menu bar”. This will enable the “Develop” menu and all other features required to view webpage’s source.

Viewing Webpage Source

Once the “Develop” menu is enabled, open the webpage you want to view the source. Similar to other browsers just right click and chose “Show Page Source” or “Inspect Element” option. This will open the Web Inspector console at the bottom of the page.

Note: Web inspector can also opened using the shortcuts “Option + Command + I” when the “Develop” menu is enabled.

Using Web Inspector Console in Safari

The web inspector when docked at bottom of the page will look like below having multiple sections:

1. Dock the web inspector console to right side, bottom or open it in a separate window to use as per your convenience.
2. Click on the reload button to load the page and download button to download the web archive of the page to your local Mac. Using this download option you can get the local copy of any webpage for later analysis.
3. The tab panels have many panels like elements, network, resources, timeline, debugger, storage and console. Click on the required panel to view the related information.
4. Based on the selected tab the details can be viewed under this left panel. For example, the resources tab will show all resources like fonts, images, stylesheets and scripts used on the page.
5. This right panel shows the corresponding detailed information for the section on the left panel. For example, selecting the “Resources” tab and then “Stylesheets” will list down all the external stylesheets used on the page. Click on any stylesheet to view the source in the right side panel.

Inspecting Elements

Right clicking on any of the element on the page will show “Inspect Element” option and clicking on it will open the web inspector. Under “Elements” tab move the mouse and the corresponding element on the page will get highlighted. Once the element is selected the corresponding CSS of the element can be viewed under “Styles” tab on the right side panel.

The “Styles” tab has three dropdown values – “Styles-Computed, Styles-Rules and Styles-Visual”. The “Styles-Rules” option helps to show individual CSS class as can be seen in Chrome and Firefox. You can enable, disable, modify individual CSS properties of the element directly and see the impact the web page.

Viewing on Responsive Modes

Safari makes it easy to view the webpages on different types of display generally used to test the responsiveness of the webpage. Click on the “Enter Responsive Design Mode” option available under “Develop” tab or use keyboard shortcuts “Option + Command + R”. You can view the display on different devices like iPhone, iPad and other Macs.

Safari also offer to choose the user agent to render the page on all latest browsers like Chrome, IE11, Edge and Firefox on iOS, Mac and Windows platforms. Responsive mode can be exited either with keyboard shortcuts “Option + Command + R” or from the menu “Develop > Exit Responsive Design Mode”.