Firebug Firebug Web Development Debugger
All the major web browsers have web development tools. Firebug is a web tool available as a plugin for the Firefox browser. Firebug claims to have the most advanced JavaScript debugger. Firebug allows you to debug HTML and CSS as well as analyze network usage and performance. Firebug also has extensions that can be added for additional functionality.

Console Tab
The console tab has the ability to: Debugging message can be written from the JS to the Firebug console.
           
<script>
   "use strict";
   var total = 5;
   //totals = 10;
   console.log("total: " + total);
</script>   



Firebug can also report errors to the console. Even those errors found by using the strict mode.

Firebug allows JS commands to be run at the console command line.

It also has a JS command window where multiple JS lines can be entered and run.




Script Tab
The script tab provides a JavaScript debugger that has the ability to:

Under the script tab, there is an "inline" control that will show all the JS associated with the web page. You and select and debug the desired script. Next to the Minimize and Maximize buttons there is a Detach Window button which allows you to display Firebug in a separate window that the web page you are debugging.



Conditional breakpoints can be set by right-clicking a breakpoint.



You can enter expressions in the Watch window and see the values change while debugging.



Network Tab
The network tab displays load times for the various components. It will also display loading errors.




More Firebug Information
By clicking on the Firebug icon in the upper-left corner, you can access configuration options and obtain documentation about Firebug from the Firebug website.



Top