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.
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).
Web Developer ->
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
The following screenshot shows both sets of tools on at the same time.
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
Show Web Inspector