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. Read the instructions further down the page or watch the video for a quick start.
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
The first step is to turn on the
- Go to Safari Preferences.
- Click on the
- Check the box beside
Show Develop menu in menu bar. A new Safari menu item appears, labelled
- Close the Preferences window.
The Develop menu offers a lot
Inspect an Element
Control (⌃) click on any item on the page to bring up a contextual menu.
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
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.
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.