Almost all web developers know about Firebug, a plugin for Firefox that makes web development so much easier, at least for developing in Firefox. Not everyone knows that Safari has its own development tools built right in.
Available on both the Windows and Mac versions of Safari (preferences > advanced) is a tick box ‘Show Develop menu in menu bar’ which enables the development tools. Â By default it is unticked but enabling it allows you to right-click on any element on a web page and select Inspect Element and bring up the Web Inspector much like you can do with the Firebug plugin for Firefox.
Above: the Web Inspector.
The Mac version  gives you this menu which as you can see allows you to perform some very handy tasks such as opening the page in another browser and spoofing the browser’s user agent.
Tweet
Problem is that Firefox’s Firebug plugin is still substantially more powerful. If you want to do real javascript debugging and CSS styling, Firebug is really the only option.
Have you tried Chrome Developer Tools? It is vastly superior to Firebug, imho
Awesome. Im on a mac! And the developer tool for safari is awesome!
Ive not yet tried firebug though…which is better guys?
The windows version contains the develop menu too.
All that you have to do is to press the alt key on the keyboard and all the menus similar to the Mac version will appear.
This is great! I use FireBug and FireFox when I have to, but 99% of the time I’m in Safari. I’ll use this every single day, guaranteed. Thanks for posting the tip!
Thanks for sharing this , really nice to check on Safari too (New to MAC)
Thanks again guys…
Thanks Man!
I’m really confused my boyfriend showed me this and like somehow changed my status on facebook apparently using this? I don’t really know what this is could you please explain how to do that?
Great tip! I’m new to a Mac and I was looking for a way to do this. Cool site by the way. Thank you!