How to find a rare bug? - javascript

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 complicated (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.

There are two main approaches for dealing with this:
Set break points and step through your code
Start commenting out certain sections of code. Once you comment out a section that eliminates the bug, start commenting 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:
A loop that never terminates.
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-completes, 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,
Try to put console.log in all the functions, which are getting called from window.onload or document.ready (if you are using jquery).
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?

Related

Catch function that initiates animation on element

I need to grow my debugging skills. I have to find the peace of code that animates position of element. Animation begins after ajax, xhr requests are sutisfied. The property name "left"
If you can't help me without example, visit this http://livedemo00.template-help.com/wt_45344/404.html
So the question is not "what function...", but "how to find what function..."
You have correctly enabled the Break on Attributes modifications, which will mean the debugger will break when your style changes, as per below:
You can see what function is called to trigger the attribute change. However, it is just the minified jQuery. With a source map configured, you would see things a little more clearly. However, this is still not your code. That is the problem.
Your code is triggered asynchronously, which can sometimes be a pain to debug. However, Chrome has a neat feature that allows you to debug asynchronous code. Enable as per below:
Now when you try to debug your code, you can scroll down in the call stack and find your original calling code outside of the current execution context.

Is there a way to skip jQuery/Backbone/Underscore code, when stepping through JS with debugger?

When using Chrome debugger to step through the code in my JS apps , I often find myself wading through backbone/underscore/jQuery code which I'm not interested in following. Is there anyway to step through my code, but have the debugger skip code which is part of these libraries?
I just spent three days living inside chrome's debugger doing exactly this.
The trick is to set a breakpoint on and the next line after the Backbone/jQuery/Underscore code and F8 when you get there.
Like
for(_(obj).each(function(v,k,l){
console.log( k,v,l);
});
Set your breakpoints on the for line and the console line. F11 down to the for line, then F8 and then continue your stepping.
It's a little bit of a pain to set up but since toggling breakpoints off is easier than setting them initially when you have it set up its easy to maintain.
In most debuggers, you have a "Step out" (of current function), so you can use that whenever you step into the top-most levels of the libraries you want to skip.
EDIT: Btw, step out goes from current location to the return in the current function. I haven't used debuggers too much, so I can't tell what would happen if you step out of a function with asynchronous calls in it. I can only imagine it would exit the function and the async call would go on about its business while you step into something else.

View all open events on html node - Javascript

I still consider myself a novice with javascript...so be gentle :)
Is there a way to view all open events listeners on a page and perhaps to see any inifinte loops that may be running?
What is happening, is a page I'm trying to debug works fine. Nodes get added to the page dynamically via a drag and drop method. All works well, but as time goes on, it seems to get increasingly slower - meaning the mouse starts skipping and the such.
I don't know if this is because javascript stores stuff in memory and my memory is getting used up, or if because of the constant checking of elements on mousemove slows things down as more elements are added to the page.
So I thought I would ask what I thought to be the obvious of maybe eventListeners are piling up and I'm not realizing it, or maybe there is an inifinte loop that is not being closed out.
I have firebug, and feel like I've looked at everything. I've put in console.debug statements in the loops and they all seem to end fine.
Any debugging tips would be appreciated.
I would say definitely be careful of memory leaks, especially in IE.
Here's a good resource for learning Javascript:
www.javascriptkit.com
Specifically here are some useful articles:
http://www.javascriptkit.com/jsref/events.shtml
http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
What you need is a JavaScript profiler. Google chrome has a built in under ctrl-shift-j > profiles. There is one available in firebug for firefox as well.

Attention JavaScript gurus: Need a hand with setInterval()

I am trying to make a non interactive display for a real estate shop window.
It's been a while since I've played with setInterval().
The first time my script steps through, it is fine. But when it tries to get the next property via getNextProperty(), it starts to go haywire. If you have Firebug, or an equivalent output of console.log(), you'll see it is calling things it shouldn't!
Now there is a fair bit of JavaScript, so I'll feel better linking to it than posting it all.
Store Display
Offending JavaScript
It is worth mentioning all my DOM/AJAX is done with jQuery.
I've tried as best to make sure clearInterval() is working, and it seems to not run any code below it.
The setInterval() is used to preload the next image, and then display it in the gallery. When the interval detects we are at the last image ((nextListItem.length === 0)), it is meant to clear that interval and start over with a new property.
It has been driving me nuts for a while now, so anyone able to help me?
It is probably something really obvious!
Many thanks!
Update
Well, now I feel better to know the problem was my naiveness of assuming plugins would work out of the box.
I did get this plugin from an answer on Stack Overflow. I have alerted the author of this question.
Thanks for all your answers!
Here's your problem area:
jQuery.extend(jQuery, {
imagesToLoad: 0,
The problem is that this variable is global/shared (jQuery.imagesToLoad), so this check later on:
if(jQuery.loadedImages.length >= jQuery.imagesToLoad){
Depends on this plugin not being called twice at the same time, otherwise that if check goes nuts, since you're calling this later in your code:
$.preloadImages({
urls: [nextImage],
That count drops to 1, making the if evaluate to true not just on the last image, but all the images after the first in sets after the first (due to when the callback runs, it overlaps in time), which causes the complete callback to fire many times, not just once, so this code:
$.preloadImages({
urls: preloadImages,
complete: function() { showProperty(property); }
});
...sees that complete function running many times, so you're starting many intervals at the same time (this is why you see console.log('show property called' + property.slug) execute so many times in the log).
Short fix: replace the preloadImages code with a version that doesn't use a global variable :)

How can I debug this memory usage / dom usage increase in my JS/Update panel site

I'm hoping some Javascript/ASP.Net gurus can give me some hints here.
I've written an application which (unfortunately) uses UpdatePanel (yes, I'm aware that was a dumb idea, too late now though, I understand it more now - even though its an intranet site I'm having troubles with it)
The site is a web based timesheet site, kind of tabular format. Anyhow, it basically saves everything in it in an update panel, and autosaves once a minute. This seems to work fine for me, but I use firefox. Other users with more timesheet entries, and IE7 have problems with IE memory usage increasing and their browser slowing down.
I ran Sieve (checks for memory leaks on a website) and it was pretty obvious it was bad:
alt text http://rodh.org/images/Programming/sievemain.png
Thats my site loaded up and left running for a bit, refreshed it at the dip and left it and you can see once a minute it jumps up a little bit. THe area on the timeline before the dip was when i was hitting the save button a bit, so its obvious what is causing it. The DOM nodes and memory both go up.
I'm using a ScriptManager.RegisterClientScriptBlock's (mainly to get the clientID's of controls so I can do javascript totals) and also a ScriptManager.RegisterStartupScript on page_load to get set the focus to be the same after a partial postback. Maybe they are contributing?
Is there any tools that can help me out further to this? Sieve reported alot of empty divs being made when the postback occurs? bit I've never used sieve before so maybe this always happens?
alt text http://rodh.org/images/Programming/sievnodes.png
Is there some sort of code analysis I can do, or something that at least lets me see the new DOM nodes created each time...
I'm thinking hte problem might be to do with my code behind hackery to get the client id's, it stores them in an array, and then recreates taht array on each postback, perhaps something is going wrong there?
I've uploaded my JS file which does that hackery, and also the code behind in case anyone needs more info.
http://rodh.org/images/Programming/javascript.txt
http://rodh.org/images/Programming/codebehind.txt
So I guess my question is:
- Can anyone think of anything immediately that would be causing this?
- what are some common causes of increased DOM usage on UpdatePanels (using Jquery too btw)
- what tools can I use to debug?
I can tell you first hand Microsoft knows about the IE problem(KB 2000262) with UpdatePanels. Its a DOM parser issue. I had a site that ran fine up until a certain page content size and then IE(all versions) had a fit. FF and other browsers handled the same pages with ease.
Things I did to make my pages faster:
Use UpdateMode=Conditional wherever possible
Implement the KB 2000262 fix
UpdatePanel Async Postsback slow in IE…Part 3

Categories

Resources