Question

I have this script that I cannot debug by trial and error. What is the preferred EASY way to debug javascript? How do I track down bugs using Firebug as easily as I use Firebug for css debuging?

http://jsfiddle.net/infatti/72QPC/5/

var options1 = {
  valueNames: [ 'filterUrgency', 'filterType', 'ID', 'Type', 'Task', 'Project', 'Status', 'DueDate', 'Region', 'Market', 'Title', 'Author', 'Published' ]
};

//sorter 1 ---------------------------------------------
var sortedList1 = new List('sorter-1', options1);

//sorter 2 ---------------------------------------------
var sortedList2 = new List('sorter-2', options1);

Answer 1

Start by opening the “Console” tab of Firebug to check if any errors were thrown.

Usually, if an error occurs, you can look up in the console where it occurred (on which line), so it’s trivial to find that line in your code, and then decide to set a break point somewhere before that line (if necessary.)

You can set break points in the “Script” tab. Just select the file, and click on the line number, then trigger code execution (e.g. reload the page). Execution will halt on that break point. You can then analyze the state (e.g. the values of local variables, and arguments).