Develop Reference

Not sure if question or solution - when computer is low on RAM my event listener was only working if I specified "type='click'"

I'd love to understand why.
Specifically,
document.getElementById('playAgain').addEventListener('click', startGame);
did not work, but
document.getElementById('playAgain').addEventListener(type='click', startGame);
did. It was definitely my computer having issues and it loaded fine later, but what would cause this behavior? My assumption is that something about setting the default event type was working correctly even when the my page wasn't loading the right way(The script was deferred and in the head of the html).
Unfortunately, it's not simple to replicate this behavior but I did check this quite a few times with a few different listeners.
Could it help prevent runtime errors to set the default type more often?

What causes a function to run in the console but not when it is invoked by an event listener?

EDIT
Added a link to a sandbox with working code. For some reason it seems to be working in the sandbox in the same browser it wont work on?!?!
CodeSandbox Demo
I am experiencing this weird issue of invoking a function in the console and it working as expected. However, when I invoke the function via an event listener it breaks the element.
The element is a canvas that is drawing different "bodies" on to it over a set interval.
Why would cause this function to work in the console but not in the document?

Two questions and then I might be able to help you.
Number 1: Are you using a library like p5.js or are you drawing it straight onto the canvas?
Number 2: Could you please post the code, as there might be an error?
Also if you want a quick solution, try using a different browser (although this might not be the solution, it is worth a try), such as Firefox Developer Edition, or just regular Firefox.
Hope this is helpful!

How to find a rare bug?

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?

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.

How to ignore certain script files / lines when debugging?

I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?

In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.

Looks like you're looking for Visual Event.

You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.

If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()

You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.

If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.