Where are the Web Developer Tools and how to show and dock them in a browser window in Safari in OSX Lion 10.7

The web inspector tools in Safari 5.1 on OSX Lion is switched on and displayed by enabling it in Safari > Preferences > Advanced > "Show Develop menu in menu bar"

show-safari-web-developer-tools

Then from the Safari "Develop" menu select  "Show Web Inspector" or Option+Command+i

When opened it pops up in a new window, to get it docked to the bottom of the current Safari window click on the bottom right button to snap in at the base of the current open Safari window.

dock-web-developer-tools-safari

 

And voila! In place just like it ought to be.

safari-web-tools-docked

To permanently dock the developer tools go into Safari View Menu > Customise Toolbar... and drag the Web Inspecor icon to your tool bar - now each time you click it it will dock the dev tools in the lower half of the window.

dock-developer-tools-customise-toolbar

Tags: