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.
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
8. Timeline Recording
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.