Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Monitor all JavaScript events in the browser console

Is it possible to listen to all javascript events?

I'm trying to guess if there's an event triggered after the DOM is modified by an AJAX request.

like image 958
knoopx Avatar asked Aug 15 '10 21:08

knoopx


People also ask

How do you track browser events?

Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.

How do Monitors use events?

You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]) . The event objects are then logged to the Console. Useful when you need a reminder of the available properties on the event object.


1 Answers

With firebug or web inspector you can use monitorEvents:

monitorEvents(myDomElem); 

This prints all events emitted by myDomElem to the console. Use unmonitorEvents to stop monitoring events.

If you're interested in getting events after the DOM has been manipulated, take a look at Mutation Events.

Edit:

As far as I know, there is no easy way to intercept all onreadystatechange events from all XMLHttpRequest. The only work-around I can think of is to override the native XMLHttpRequest object with you own implementation. For example:

(function() { // Overriding XMLHttpRequest     var oldXHR = window.XMLHttpRequest;      function newXHR() {         var realXHR = new oldXHR();          realXHR.addEventListener("readystatechange", function() {              console.log("an ajax request was made")          }, false);          return realXHR;     }      window.XMLHttpRequest = newXHR; })(); 

Needless to say this is extremely hacky and generally ill-advised.

like image 71
Xavi Avatar answered Sep 25 '22 04:09

Xavi