- Forward


ECMASCript/JavaScript Debugging
Using Firebug


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu

Print

Getting Started
Back Forward
  • Distribution:
    • Firebug (which is both a debugger and a profiler) is distributed as a Firefox plug-in
  • Setting Up:
    • Downloading the plug-in will start the installation process (which you will need to "Allow")
    • You may need to re-start Firefox to complete the installation
The Process
Back Forward
  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
Back Forward
  • Normal Breakpoints:
    • Set/clear by clicking on the line number
  • Conditional Breakpoints:
    • Set by right-clicking on the line number
    • Enter the boolean expression (which can involve any variable/function that is in scope)
    • Clear by clicking on the line number
Execution
Back Forward
  • Continue images/firebug-continue.gif:
    • Run continuously until the next breakpoint is reached
  • Step Into images/firebug-stepinto.gif:
    • Execute a single instruction (if it is a function, invokes the function)
  • Step Over images/firebug-stepover.gif:
    • Execute a single instruction (if it is a function, execute the entire function)
  • Step Out images/firebug-stepout.gif:
    • Execute the rest of the current function
State Information
Back Forward
  • The Watch Window:
    • See the contents of all variables that are in-scope
    • Expand/contract objects
    • See the current value of this
    • Create watch expressions involving variables that are in-scope
  • The Call Stack:
    • All of the function calls that were required to reach the currently executing statement
An Example
Back Forward

Debugging the BMI Calculator Click here for a demonstration.

ecmascriptexamples/clientsidebasics/bmi.js
 
There's Always More to Learn
Back -