Tips & Tricks : How to enable web inspector in Safari browser?

Tips & Tricks : How to enable web inspector in Safari browser?

Internet Explorer and Firefox both has goodies to allow web designer, developer and users to look inside rendered html page, its session, cookies, DOM, scripts and css etc. IE uses Microsoft IE developer tool bar, Fiddler and other proprietary add-ons. While Firefox comes with Firebug and lots of other extensions which allow you to inspect internals of rendered html page.

While Safari is cool. It is fast and well integrated with (Mac) os. Slick looks and connection with iTunes. But what if you need to inspect your cookies, urls, DOM, scripts and all other things for your website. How can you do that with Safari? There are two options right now we have.

1. Firebug lite



This is basically a JavaScript file which can be injected into any web page to stimulate some of the firebug features in browsers. Firebug lite generates variables to perform its magic and not to affect or impact existing HTML elements. These variables are "firebug" and "pl".



2. WebKit’s Web Inspector Drosera

WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications.

Drosera is a JavaScript debugger for WebKit that can be used with any application that uses WebKit. Like the Web Inspector, over 90% of it is written in HTML, CSS and JavaScript.

Now I have made you curious mentioning about both of these tools. Let me share how to get these tools for your web development.

• Enable Firebug Lite



If you prefer you can check in detail about Firebug lite here .

In short you can use Firebug lite in three different ways.

First you can add in line javascript to contain Firebug lite,
second you can drag Firebug lite as a bookmarklet. On safari, I could not drag and drop the link to bookmark toolbar. But on IE I could.
Third is to download it offline and install it.




• WebKit’s Web Inspector Drosera



Provided you download, build and install Webkit as per instructions here.

Either run following command from command window / terminal:


defaults write com.apple.Safari WebKitDeveloperExtras -bool true


Or

Add an entry to WebKitPreferences file.



<key>WebKitDeveloperExtras</key>
<true>



WebKitPreferences file is supposedly found at C:\Documents and Settings\Administrator\Application Data\Apple Computer\Safari\ on windows and at ~/Library/Preferences/com.apple.Safai.plist on Mac. Better to use search/finder utility to find the file.


• Develop Menu on Safari

This one allows you to use Develop menu which has web inspector, Error console, Network timeline etc. It needs web kit be installed or pre-installed.
















This is been tried on Safari 3.2

You can open safari, then go to Edit > Preferences > Advanced properties tab.

After you check "Show Develop Menu in Menu bar", develop menu will appear quickly on top side:

If you click on develop menu, it will look as below:

Finally here is the web inspector

Enjoy...