Features of the Develop tab on Safari for Mac

I have already touched on a nice aspect of the Develop tab on Safari that lets you change your browser to make it look as if you are viewing mobile rather than desktop versions of websites. This is a handy way of accessing some mobile only features of websites, such as Instagram.

I have described HERE how to enable the Develop tab and why this is a pretty cool feature. There are a lot more things you can do in the Develop tab and they are particularly great to use for website development, so not every Safari user will need to have access to them.

I’ve listed below some of the team’s favourite uses of the Develop tab.

Open Page With…

This one is a handy tool, especially when it comes to website testing. It allows you to open the page you are currently viewing in any of the other browsers you have downloaded. To access click on Develop – Open Page With – and then choose the browser option you want. This is a quick and easy way to show how a website will look in various browsers and cuts down on time used if you’re in a hurry, or just want to get the job done.

User Agent…

As well as using this option to trick a website into believing you are viewing it from a mobile (iPhone, iPad touch, iPad) rather than desktop (as described in our recent blog), this tab also makes the website think that you are viewing it from other browsers without having to open them. This is handy for timesaving as well as making sure all elements are properly rendered on all browsers, not just Safari. Here’s a look at some of the viewing options contained within this tab.

Enter Responsive Design Mode…

Another very cool option if you want to view your website exactly as it would look on other Mac products. You can choose anything from the iPhone SE to various screen resolutions for Safari. When you’re finished viewing in your chosen mode, either close the window or choose the option again to exit Responsive Design Mode.

Show Web Inspector…

This can be accessed either by opening the Develop tab and scrolling to the option, alternatively, once the Develop tab has been enabled you can also double tap the trackpad and choose Inspect Element.

Once enabled, you can use this to inspect the different elements that go into creating the page you’re currently viewing. Within this view you can also see the Page Source (HTML code of current page) and Page Resources (images, scripts, style sheets, etc. on the current page), among other options. A vital option when it comes to web design.

Start Timeline Recording…

This is a good tool to use to see exactly how a page loads and runs. Set this to run by choosing the option in the Develop tab, and then run the page for analysis. It will produce a nice graph showing the timeline of how each element is loaded, ready to be analysed. Don’t forget to turn it off though as it will keep running otherwise.

Start Element Selection…

I’ve highlighted the Inspect Element option in a section above but using option you can highlight and select each individual element you wish to inspect more easily than when all the data is bunched together in the Inspect element view.

Empty Cache…

This last one is good to use if a website is not loading properly or displays incorrectly. This may happen if the data stored away by Safari in a cache gets too old or becomes corrupted. Emptying the cache can help fix this issue and it’s always a good place to start.

There are many more things that you can do with the Develop tab. What’s your favourite tool to use, or did you find any of our tips helpful?