I have an issue where input is being doubled, tripled, quadrupled, etc. on user input after changing a select dropdown multiple times. Here’s a small video showing my dilemma and posing the question: http://screencast.com/t/7Gb01nGe787p
Essentially the question is how to debug properly given circumstances like this?
I think how you debug depends heavily on how your code is structured.
If you are using widgets(jquery UI stuff, plugins, external libraries etc) you can always search around and see if its a known bug/issue. Aside from that, checking configurations(I’ve been burned by config’s not being correct several times) can be helpful. Also check for conflicting code, such as events you may have defined that could interfere with the widgets behavior. Manipulating objects in the webkit console is particularly useful for this, since you can more easily find out in what cases your code will work, and in what cases it will not, without necessarily having to rely on manipulating the UI.
If you are not using something other people wrote, then debugging is a little easier in my opinion. For me, it really comes down to narrowing the scope of where I am looking. If you have any events related to your issue(onKeyUp or something), log it. Console.log can go a long way, especially when dealing with the state of UI, and so can breakpoints. I’m not sure if this is necessarily the best way to do it, but I find it to be very useful in the right situation.
If you are really stuck, you can always get drastic and start removing pieces of your code. May not sound very nice, but if you are really stuck and cannot seem to find what section of code is being problematic it will at least give you an indicator of where to look. Again, not the prettiest solution, but it’s saved me a lot of headaches on more than one occaision.
Hope this helps.