10 Tips for Developers Using Safari on Mac

Apple claims Safari is the fastest browser and helps to retain more battery life compared to Chrome and Firefox. Though Safari’s performance goes down over the period of time it is definitely better browser on Mac. Especially for developers there are lots of hidden features to make more use of Safari. In this article let us explore 10 tips for developers using Safari on Mac.

1. Enable Develop Menu

By default the developer menu in Safari is disabled and hence you may not be able to view webpage source CSS or HTML. Navigate to “Safari > Preferences…” and enable the option under “Advanced” tab to add “Develop” menu in the default menu bar.

2. Viewing Full URL on Address and Status Bar

At times looking at the domain name on the address bar may be making you crazy. Enable the option under “Advanced” tab of Safari’s preferences to view the full URL of the site.

Similarly if you are habituated to look at the left bottom on status bar when hovering over the links, you can enable to show the links from the menu “View > Show Status Bar”.

3. View Source Code of the Page

Once the “Develop” menu is enabled, right clicking on the page will show you additional options for viewing the source of a page and “Inspect Element” options. Choosing any of the option will open web inspector console of Safari showing the resources used on the page.

Read more on viewing page source code with Safari.

4. Empty and Disable Caches

Though caches help to load the page faster for normal users, it is one of the biggest issues for a developer. Especially when you logged into some site it is not possible to clear the caches using clear history option as this will logout from the site. The easiest way is to use empty or disable caches available under “Develop” menu.

5. Enable Responsive Mode

Responsive mode is helpful to check your design on different devices and user agents. Safari allows developers to use advanced responsive mode feature, which can be enabled under “Develop” menu.

Following are the options you can do with responsive mode:

• Enter or exit responsive mode using keyboard shortcuts “Option + Command + R” when “Develop” menu is enabled.
• Choose the device and the scale factor for retina images to see how a page looks on different devices.
• You can drag the page size to view it as you need.
• By default portrait and landscape views of all Apple devices are available to view how a page will look on iPhone, iPad and Mac.
• You can also select user agents for Chrome, Firefox, IE and Edge browsers to see the page look on Windows, OS X and iOS platforms. User agents can also be changed with “Develop > User Agent” menu option.

6. Snippet Editor

Snippet editor is a code previewer enabled under “Develop” menu. This helps to validate the CSS JavaScript and HTML codes on the page as a sandbox without opening another page.

7. Disable Images, Styles and JavaScript

It is easy to disable or enable images on a webpage, CSS and JavaScript using single click under “Develop” menu. This helps developer to view the page without images, CSS and scripts to check the loading time and troubleshoot other stuffs.

8. Timeline Recording

Since the page loading speed is more important it is easy to record the activities on a page with “Start Timeline Recording” option under “Develop” menu. You can use the recording to analyze the incoming HTTP network requests, layout rendering and JavaScript events.

9. Disable Cross-Origin and Local File Restriction

Cross-origin restriction (CORE) is the fundamental of web designing which does not allow loading certain file types like fonts hosted on another domain. By disabling CORE you can test resources located on any other domains easily.

Similarly disabling local file restriction option helps to disable the security checks hindering your local development.

10. Allow JavaScript from Smart Search Field

Enabling this option under “Develop” menu will allow you to run JavaScript expressions right from the address bar of Safari with the syntax “javascript: expression”.

Learn 10 tips to increase the productivity on Safari for regular users.