Using Web Inspector in Safari 3

I am really digging Safari 3. One of the cool features in Safari 3 is web inspector. Web inspector is a tool mainly for web developers to use in debugging web pages. It is basically Firebug for Safari.

Web inspector is not new. It has been available for a while in Safari 2. But it has been redesigned for Safari 3. Here is a screenshot of it.

The tricky part is that you need to enable it in order to use it. First, if you are using Tiger, you need to get 10.4.11 in order to make sure you have Safari 3. If you are using Leopard, you already have Safari 3. Once you have it you need to be able to use command line in Terminal. To enable Web inspector, open up Terminal and type the followwing command.

defaults write WebKitDeveloperExtras -bool true

Now you have it enabled. To use it, restart Safari and right click on any element on a web page and select Inspect Element. This will open up Web inspector.

I won’t take the time here to give a thorough review of everything it does, but play around with it and test it out. It lets you view the underlying code of your page along with the CSS applied to each element in the correct cascade order of the properties. It also gives you an error view and a network view. The network view shows you how each item on the page downloaded and how long it took. There is also an element inspector that lets you view each element that was downloaded that can be very useful for developers.

I also have to comment on how fast Safari 3 is. I noticed while using it that it is much faster than Firefox. It was enough to get me to switch to Safari from Firefox while using a web application. It’s that much faster.

So there you go. If you aren’t using Safari yet, I just gave you two good reasons to check it out.