Use Safari 5′s Web Inspector – a gift for web developers
Mac Tip #444, 07 July 2010

If you develop websites for a living you may be familiar with the Firefox extension called Firebug. If you’re not, you should install it immediately. But Safari has a similar function built right in. You just need to know where to find it. Here’s how.

Please subscribe to the MacTips channel. Or just visit this video on YouTube, leave comments and rate it, as that helps spread the word about the MacTips.

The Web Inspector

If you’re a web developer trying to analyse or troubleshoot a web page you’ll be familiar with looking at the HTML source and the CSS stylesheet to figure out how things fit together.

But sometimes it’s a mystery as to exactly why that heading is pushed down too low, or that text is black even though you set it to green. And finding all the right bits of HTML and CSS and putting them together can be very hard work.

That’s where the Web Inspector can save you time and stress: Control (⌃) click on the errant text and choose Inspect Element from the contextual menu. A window pane opens up and shows you exactly the correct part of the HTML coding and the CSS rules that are being applied.

Turn on the Develop menu.

Turn on the Develop menu

The first step is to turn on the Develop menu:

1. Go to Safari Preferences.
2. Click on the Advanced tab.
3. Check the box beside Show Develop menu in menu bar. A new Safari menu item appears, labelled Develop.
4. Close the Preferences window.

The Develop menu offers a lot

The Develop menu provides easy options for things such as opening a page with another browser, disabling images or styles, and debugging Javascript. But you can now also Inspect page elements.

Inspect page elements.

Inspect an Element

Control (⌃) click on any item on the page to bring up a contextual menu.

Choose Inspect Element. The bottom part of the Safari window slides up to reveal 2 additional panes.

The left pane displays the HTML for the page, with the element you clicked on selected and highlighted.

The right pane displays CSS rules that apply to your selected element.

Hover over different parts of the HTML to see them highlighted in the main part of the window.

Double click an item in the Web Inspector pane and you can edit it. Make changes and see them reflected in the main part of the window.

Note: you’re not actually editing the live website. Any changes you make are being applied only to what you see on your own screen, and so are useful for testing purposes. To actually edit the site you should use your usual methods.

The Web Inspector window

The Web Inspector pane.

I could write several more Tips about the Web Inspector pane alone.

If you prefer to see the Web Inspector as a separate window, rather than just a pane in the main window, click the Undock into separate window icon at bottom left of the window (shown enlarged in the screenshot). It looks like one box emerging from another.

Web Inspector Toolbar.

To see a list of errors and warnings, click the Console button (beside the Undock button). The Web Inspector pane divides so the lower part can display any errors.

A powerful tool for web developers

Safari’s Web Inspector is a powerful tool for web developers, and for anyone interested in seeing what’s really going on behind a web page.

This Tip has really only highlighted its existence. Explore it more thoroughly to get the most use out of it. I may write more about the Web Inspector at my KnowIT blog. I have already written there about using Firebug in a similar way in Firefox: Burn through web development with Firebug.

Tell us in the Comments at the website your experiences with Safari’s Web Inspector.