How to Open/Activate Web Developer Tools on Chrome, Firefox and Safari Browsers

As a web developer your browsers’ developer tools are essential. Here is how to view/turn on the developer tools on Chrome, Firefox and Safari on a Mac OS X. The process should be similar on other OS’s.

All Browsers

The easiest way to open the developer tools panel is to right click somewhere on the page and click on inspect element. If you don’t see that option then you may have to enable the tools (as in Safari below).

Chrome

Click on View-> Developer -> Developer Tools.

Chrome Developer Menu

Chrome Developer Tools

Firefox

Click on Tools-> Web Developer -> Toggle Tools.

Firefox Developer Tools Menu

Firefox Developer Tools Panel

Firebug

Firebug is an add-on that is more advanced than the native developer tools. After installing it you can turn it on the same way as the other tools but choose Firebug instead.

The following screenshot shows both sets of tools on at the same time.

Firefox Firebug Panel

Safari

Enable Developer Tools

You may have to first enable the developer tools by going to the preferences and going to the Advanced tab and checking Show Develop menu in menu bar.

Safari Developer Tools Preferences

Open the Panel

Click on Developer -> Show Web Inspector

Safari Developer Tools

Ahmed Amayem has written 90 articles

A Web Application Developer Entrepreneur.