Safari’s Web Inspector – Hell nice!!!

Safari 3 is Apple’s latest browser and is surely my favorite one in the world of browsers. Firefox, is just yuck, it has a ugly look and ARG – just horrible. We then have Opera which is the worse that I have ever experienced – I mean, just look at the icon??? Who wants that in a dock??? No one!!! BTW – same goes for the Firefox icon (Even though the fox is a nice idea). Better is the Camino Browser which is a mixture of Firefox’s browser engine and Safari’s elegance. Well done Camino group!!!

In any case, I’m a 100% Safari user and will never switch to a different one.

Now to the post, since Safari is quite new, it has some great features that have yet not been discovered. One of them is a advanced source-code inspector that makes life easier than ever, at least for developers.

Firefox has a plugin named Firebug which allows you to look at the source-code of a page, steal stylesheets in a snap and lots of other great things. Safari now supports this without any sort of plugin. A right-click inspector will allow you to get this:

The image above shows the loading time for certain things of my site. All visually interesting and the power of this “inspector” is just amazing.

Here is a image which shows the source code with syntax coloring.

This image shows how elements are set up within other elements, basically displaying the whole hierarchy and then the corresponding style attachments for this element! Coooool!

This is known through Coda already – but it is just nice to see this out of Coda.

Now how do you get this cool thing? It’s totally easy, just follow this steps:

1. Open Terminal (Applications/Utilities/Terminal.app).
2. Paste in this command line:
   defaults write com.apple.Safari WebKitDeveloperExtras -bool true
3. Hit enter and now open Safari.
4. Open any page and then right-click (or on a MacBook: ctrl + left click) and select the Element Inspector.
5. Now you have a new window with all the features above. If you want the Element Inspector in the same window as the actual page, then click on the lower-left icon looking like three boxes
6. If you want to get the inspector away, just paste in the same command line into Terminal, only with “false” at the end instead of “true.”

I hope you enjoy this little trick.