Question

I am trying to debug legacy scripts with Firebug. As per my knowledge (Which I got yesterday)
we use Step over (F10) to debug line by line and Step into (F11) to dig into JS function.
But when I use Step into on any JS function call, it takes control to next line. I want to see what is hidden inside the function. How can we do it ?
I kept break-point inside the function and then tried Step into then it takes control inside the function body. But it is tedious to find each function method and set break-point.
Is there any other way to do it ? or which is the right way ?
For example :

 i2b2.ONT.ctrlr.FindBy = {

    clickSearchName: function() {
      // do some stuff
      i2b2.ONT.ctrlr.FindBy.doNameSearch(search_info);  // I tried Step into here
      // some more stuff
    }  

    doNameSearch: function(inSearchData) {
     // If I set break-point here then only I can debug it 
     // or it directly takes control to `// some more stuff` in `clickSearchName:function` 

    }
 }     

PS: It also more external JS function calls.

Thanks,
Ajinkya.

Answer 1

“Step into” will step into the function if there is JS source for the function. If not (like for document.getElementById("foo"), it will step over it since it doesn’t have anything that it understand to step into.

If you can point us to a working example where you are having the problem (either a jsFiddle reduction of the problem or a working web page) with instruction on where the relevant code is, we can probably help more.

Judging by your code example, I’m wondering what you’re trying to step into. The line of code that starts with clickSearchName defines a function. It doesn’t execute it. So, it won’t go into that function until some later code actually calls clickSearchName. So, perhaps you’re breaking on the definition of the function and trying to step into the function when it isn’t being executed. That’s just a guess though since we don’t have a working example to try ourselves.