Safari Web Inspector

We all should know about the Firefox Firebug plugin, but did you know about the built-in web inspector for Apple’s Safari browser?

It’s a powerful set of tools that make it easy to debug, tweak, and optimize a website for peak performance and compatibility. You can view the structure of a page (DOM and CSS), debug JavaScript and graph page resources by either size or load time.

Here is the simple way to activate it and use it…

Open up Safari and go to your preferences, in there click on the tab thats labels Advanced and tick the box for Show Develop menu in menu bar and close the preferences window.

Next, go to the view menu and select Customize Toolbar, or you can right click in the toolbar and select it that way.

You will see a window with a selection of icons, the one we are interested in is the web inspector icon. Click and drag it to the desired location on your toolbar.

To use the web inspector go to or open the web page you wish to inspect and click on the icon in your toolbar. You will then see either a pop-up window or a panel at the bottom of the browser (you can change the viewing preference with the button at the bottom left of the inspector). Have play around with it and explore it’s many features. You can also use the Develop menu for more debugging options such as changing the user agent and disabling Javascript, CSS, Caches etc.

Window view

Panel view