My application contains a bug, which makes script run infinitelly long. When I force script to stop, all jQuery UI elements don't answer to my actions, nor application answers to keypresses.

If I choose to open Firebug, it requires reloading page and all current application state is lost.

The thing is I can't reproduce this bug and it's kinda driving me crazy. How to find and fix such slick bug?

UPDATE. Thanks all of you for the advice. But the problem is that I can't figure out when bug happens and, hence, can't reproduce it. That's why standard procedures won't work in my case.

I have examined every while loop and recursive function calls, but haven't figured out the problem yet.

Publishing the code isn't a good idea — code listing is huge and rather plicated (a game).

POSSIBLE SOLUTION. I'll follow one of the published hints and will try to consolelog all functions that might be causing the problem. Hope it helps.

My application contains a bug, which makes script run infinitelly long. When I force script to stop, all jQuery UI elements don't answer to my actions, nor application answers to keypresses.

If I choose to open Firebug, it requires reloading page and all current application state is lost.

The thing is I can't reproduce this bug and it's kinda driving me crazy. How to find and fix such slick bug?

UPDATE. Thanks all of you for the advice. But the problem is that I can't figure out when bug happens and, hence, can't reproduce it. That's why standard procedures won't work in my case.

I have examined every while loop and recursive function calls, but haven't figured out the problem yet.

Publishing the code isn't a good idea — code listing is huge and rather plicated (a game).

POSSIBLE SOLUTION. I'll follow one of the published hints and will try to consolelog all functions that might be causing the problem. Hope it helps.

• javascript
• jquery
• debugging
• firebug

• 2 +1. Too many questions simply ask for the solution to the problem as opposed to how to debug it. – maxedison Commented Mar 11, 2012 at 10:24
• 2 please provide a sscce :) – Mike McMahon Commented Mar 11, 2012 at 10:31
• @MikeMcMahon -- I don't think this is necessary. If the OP was asking for the solution, then we'd need some code. But he's asking about debugging, and I think we have enough to go on (i.e. the general category of the error -- infinite recursion). – maxedison Commented Mar 11, 2012 at 10:33

6 Answers 6

There are two main approaches for dealing with this:

1. Set break points and step through your code
2. Start menting out certain sections of code. Once you ment out a section that eliminates the bug, start menting out smaller pieces of that section until you arrive at the line of code that is causing the issue.

It might also help to know what you are looking for. An infinitely running script will generally result from one of two things:

1. A loop that never terminates.
2. A function that calls itself

Keeping an eye out for these things might help the debugging process go a bit more quickly. Good luck!

• break your code into chunks and determine which one causes failure. like for example, if you have a form with several fields that have date-pickers and auto-pletes, take them apart one by one. zero-in on who causes it.

• use the debugger timeline. cruise around your site with the timeline recording your page performance. you will see in the timeline which task it taking too long. the browser may crash when you find the bug, but you will at least see a glimpse of what happened when.

• try to recreate your actions. do some step-by-step checklist on how you navigate through. this way, you can trace in the code the possible path your script took when you did your move. if only JS had a back-trace like PHP, this would be easier.

• try to review your code. things like loops, recursions or even two functions calling each other can cause this never-ending loop.

• if you could, use a VCS tool like SVN or GIT. you can easily build n' break your code without the worry of losing a working version. you can revert easily if you use VCS.

Infinite long time, means,

I think some function is getting called recursively or some event is getting fired recursively. To track it down,

1. Try to put console.log in all the functions, which are getting called from window.onload or document.ready (if you are using jquery).
2. Use Firebug's profile, which will tell you every function call that is happening.

I always look for functions that might be being called too often or loops that never stop looping. Then, keep track of how many times your suspected functions/loops execute. Example:

    var runCount = 0;
    function guiltyLookingFunction(params)
    {
        runCount++; //increase by 1 every time this function runs
        if (runCount>1000) //if this has run some insane number of times
            alert("this function is the that's running wild!");

        //the rest of your function's code

        //same thing with loops within functions:
        var loopCount = 0;
        while (0!=1)  //this will always be true, so the loop won't stop!
        {
            loopCount++;
            if (loopCount>1000)
                alert("this loop is to blame!");

            //the rest of your loop
        }
    }

(replace "this function/loop" with some specific identifier if you're monitoring multiple suspects)

A) Use WebKit's (Safari, Chrome, Chromium) inspector instead of firebug - No more reload, yay!

B) Set some debug output along the way that will help narrow your problem down to the perpetrator.

Firebug. Reloading? Didn't you try to open Firebug before page loading?