Enable Safari’s Awesome Built-in Development Tools

by Tom Kenny (@tkenny)

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.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.