Turning on the Develop Menu

Open the safari preferences window, click on the ‘advanced’ option and then select the box entitled ‘Show develop menu in menu bar’. Straight forward! The result is a new field in the top menu which looks like the following:

Changing the User Agent

When testing your website, there are four main browsers to bear in mind – Internet Explorer, Firefox, Safari and Opera. We have covered testing these browsers on both the windows and mac platforms previously. If, however, you need to quickly use the user agent one of these browsers in order to check a piece of conditional formatting, Safari makes it easy. It is also possible to spoof the user agent of an iPhone or iPod Touch browser to check how your website would behave on a mobile device:

Whilst this does not allow you to test how your website looks in these browsers, it is possible to check that any conditional formatting, browser specific CSS or mobile device re-directs are working as expected.

The Network Timeline

Whilst user agent emulation is handy, by far the most useful piece of functionality in this update is the network timeline. This offers a visual representation of each item loading on your webpage, along with the time it took and the total file size. It makes it very easy to see which elements of a page are slowing the user experience and where your page needs cutting down.

Running Design Shack through the tool shows that our main bandwidth hog is the images on the site – fairly expected due to the nature of the website! It did highlight a few scripts which took longer to load than we expected and may be a basis for changes in the future. This is what the tool looks like when running:

Whilst similar analysis tools have been available for many years, this is a great way to visualise the back-end of your website. Try running your web page through it and let us know if you find anything interesting!

• Some test comment one
• Some longer test comment two testing things out. Making it longer so that it wraps. Some longer test comment two testing things out. Making it longer so that it wraps.