Non-breaking breakpoints (trace points) in Javascript? Non-breaking breakpoints (trace points) in Javascript? google-chrome google-chrome

Non-breaking breakpoints (trace points) in Javascript?


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!


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!


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.