6

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:

Sample trace

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.

Chris
  • 5,876
  • 3
  • 43
  • 69
  • 1
    If you just need this for tracing DOM events, you can try using the console's [`monitorEvents()`](http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents) method. – kpozin May 05 '12 at 23:22
  • I actually did try using monitorEvents at one point, by throwing pseudo-events for non-DOM objects. You can get pretty far by monitoring errors, but it doesn't have the fine-grained filtering I needed. – Chris May 07 '12 at 01:53

3 Answers3

3

IE11 now has "tracepoints", independent of Visual Studio. They do exactly what you asked for three years ago. I don't see them in Chrome or any other browsers yet, but hopefully they will catch on soon!

David
  • 688
  • 7
  • 13
  • Cool! https://msdn.microsoft.com/en-us/library/ie/dn255007(v=vs.85).aspx I actually like the library I set up now since I can leave trace points in all the time and turn them on and off as needed. Guess that's what happens. – Chris Mar 25 '15 at 21:51
1

The best option I found was to edit the javascript code in Chrome's Javascript panel, adding a console.log.

It would only work after the page has been loaded (unless you can afford to put a break point after refresh and then add the logging lines) and (to be worse) you would have to do it each time you reload the page.

Good luck with your search!

Chango
  • 6,754
  • 1
  • 28
  • 37
0

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.

Chris
  • 5,876
  • 3
  • 43
  • 69