Taking a closer look at your web site with Safari's Web inspector

16th of November, 2010

safariAlthough squarely aimed at web developers (rather than designers) the Developer tools in Apple's Safari come in very handy when we want to take a look under the hood of any particular web page. The browser offers a number of powerful tools that allow you to debug, analyze, and examine issues in your page designs. Let's take a quick tour of some of the tools and how they can help either correct problems or allow you to optimize your sites.

Enabling the developer tools

enableBy default the developer tools are turned off in Safari; open up the preferences from the Safari menu and check the Show Develop menu in menu bar option in the Advanced tab to access them. Once enabled you'll notice a new Develop menu in the menu bar (tucked in between Bookmarks and Window) as well as a new item in the contextual menu when you right/control-click on a page, called Inspect Element.

Getting started

previewStart by previewing your site in Safari by selecting Preview in Browser>Safari from the File menu in Freeway. Once open right/control-click anywhere on the page and select Inspect Element. Depending on how you have the browser configured, the Web inspector tools will appear in a new window or a panel below the existing window. (You can toggle the tools between window and panel mode by clicking on the first button in the footer panel.)

inspecting

Along the top of the Web Inspector window (or pane) you will see five tabs; Elements, Resources, Scripts, Profiles and Databases - we're going to concentrate on the first two tabs in this overview.

The Elements tab

The Elements tab displays on overview of your page from the browser's perspective. For example, the outline view of the code (on the left) represents exactly how the browser is rendering the page regardless of whether the code was added as HTML, JavaScript or as a server side script like PHP. Being able to see exactly what the browser sees can help to quickly understand what elements are incorrectly placed and, more importantly, where scripts might be failing.

You'll notice that as you roll over areas in the outline view Safari highlights the corresponding elements on your page. Alternatively, click on the magnifying glass icon in the footer toolbar () and click an element on your page, and the Web Inspector will highlight the code for this item in the outline view. Using these tools makes it easy, for example, to see if you have layers placed over the top of other layers…Very cool!

timeline

The Resources tab

The powerful Resources tab allows you to see exactly how your page is performing. Down the left hand side of the panel you will see two areas: Graphs and Resources. Graphs offer you the ability to see how big your pages are getting by recording both size and speed (of loading). Click on the Time icon and you'll see exactly how long your page takes to download and which elements are taking the longest. It is always a good idea to keep an eye on these figures as there can be a temptation to add new items, features and functionality to a site - losing track of just how heavy, and (consequently) slow, a page is getting. Always strive to make your sites appealing yet small and fast, and you'll gain the love of broadband, dialup and mobile users alike.

Find out more

Hopefully this brief taster of Safari's Web Inspector has opened your eyes to the potential of these tools. They can help you optimize your pages and find potential problems with the design of your Freeway sites.

Find out more about Safari's great developer tools at Apple's Developer site.


User Opinions

83% thumbs up 16% thumbs down (6 votes)

How would you rate this answer?



Thank you for rating this answer.

Continue