Firebug Notes

JavaScript Debugging

Debuggers help you squash bugs in your code. A debugger can pause the execution of a JavaScript program.

For a refresher about Firebug that we demo-ed in class: http://getfirebug.com/javascript

The Firebug debugger (or Webkit Inspectore debugger) lets you put breakpoints in your JavaScript code. When the Javascript execution reaches the line of code that your breakpoint is on it stops (before executing that line of code).

When in a breakpoint you can inspect values of local and global variables (see data), look at the call stack (see which functions, at which lines in your script called you), and step to other parts of your code (only execute the current line or part of the current line).

Open up a page and click on the bug in the top-right of your browser.

Firebug Script Tab:

First you need to enable script debugging, just press enable and refresh the page.

On the chrome right below the script tab from left to right:

Break on Next (pause button with blue play button in bottom-right corner): Breaks on the next line that is executed (from the event queue?)

then all the way to the right:

Rerun (the refresh-looking blue arrow): Re-runs the javascript code

Continue (the blue play button) Continues executing code until another breakpoint

Step Into (the yellow arrow pointing down) Step into the first function that is being called on this line of code (if it exists, otherwise same behavior as step over). And break before executing this next line.

Step Over (the yellow U-turn arrow) Step to the next line of code in the file (calling the functions on the line first). And break before executing this next line.

Step Out (the yellow Right-pointing arrow) Breaks at the line of code where this function was called from (if it exists otherwise same behavior as continue)

Watch Section: all the way to the left you can examine the state of data (both local and global) and even watch the value of an expression (for example (x + 2) if you have a variable x)

Stack Section: you can see the current call stack -- every time a function is called the line of code where you return to is pushed onto a stack. You can click on the places in the call-stack to trace what line of code called the current function, and so on.

;(function() {

  var count = 0;
  var dog;
  var x = 1;
  var y = 1;

  function Dog() {
    this.name = "scooby-doo";
  }
  Dog.prototype.woof = function() {
    alert("Hello, I'm " + this.name);
  };

  x += y;
  y = x << 2;

  dog = Dog();

  document.write(tellColor(dog.color));

  y = x << 2;
  x = y << 2;
  x -= x + 1;

  function tellColor(color) {
    return "My color is " + color;
  }

  setInterval(function() {
    if (window.shouldICount !== undefined) {
      document.write(++count);
    }
  }, 2000);

}());