Non-breaking breakpoints (trace points) in Javascript?

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

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!

Answer 2

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!