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.
Firefox
Click on Tools-> Web Developer -> Toggle Tools.
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.
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.
Open the Panel
Click on Developer -> Show Web Inspector
