Question

This is a rather complicated question that may simply be impossible with what’s currently available, but if there was an easy way of doing it it would be huge.

I’m debugging some JavaScript in Chrome, and because it’s very event-driven, I prefer to get trace reports of the code (what got called, etc.) instead of breakpoints. So wherever I leave a breakpoint, I’d like to see the local function name and arguments.

The closest I can get is to drop a conditional breakpoint in, like the following:

There are two big problems with this approach:

1. Pasting this into each breakpoint is too cumbersome. People would be far more likely to use it if it could be chosen as the default action for each breakpoint.
2. In Google Chrome, the log calls get fired twice.

Any ideas on a way to surmount either of these problems? I think it might be possible in IE with VS, but the UI there seems equally cumbersome.

Answer 1

I couldn’t find something to do this, so I wrote my own.

Now, instead of constantly inserting and removing console.log calls, I leave the logging in and only watch it when necessary.

Warning: specific code below is untested.

var debug = TraceJS.GetLogger("debug", "mousemove");
$('div').mousemove(function(evt) {
     debug(this.id, evt);
});

Every time the mouse is moved over a DIV, it generates a logevent tagged [“mousemove”, {id of that element}]

The fun part is being able to selectively watch events. When you want to only see mousemove events for element #a, call the following in the console:

TraceJS('a');

When I want to see all mousemove events, you can call:

TraceJS('mousemove');

Only events that match your filter are shown. If you call TraceJS(no argument), the log calls stop being shown.