JMU
ECMASCript/JavaScript Debugging
Using Firebug


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu


Getting Started
The Process
  1. Start Firefox
  2. Start Firebug by clicking on images/firebug-logo.gif in the toolbar
  3. Select the Script tab
  4. Load the HTML page containing the code to debug
  5. Select the file containing the JavaScript of interest using the drop-down
  6. Set breakpoints (by clicking on the line number) as needed
  7. Use the code (e.g., by generating mouse or keyboard events, by re-loading the page) which will cause the execution to pause at the breakpoint
  8. Step through the code as needed
Breakpoints
Execution
State Information
An Example

Debugging the BMI Calculator Click here for a demonstration.

ecmascriptexamples/clientsidebasics/bmi.js
        /**
 * A function to calculate and display the body mass index (BMI)
 *
 * @param {number} weight - The weight in pounds
 * @param {number} height - The height in pounds
 */
function calculateBMI(weight, height)
{
   "use strict"; // ECMAScript 5
   var bmi;
   
   bmi = weight / (height * height) * 703;

   if (bmi < 15){
      bmi = 15;
   }else if (bmi > 60){
      bmi = 60;
   }

   return bmi;
}