Monitor all JavaScript events in the browser console

JavascriptEvents

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

To piggy back off Xavi's answer of monitorEvents(myDomElem), if you wanted everything but the mouse events, you could then enter unmonitorEvents(myDomElem, 'mouse').

http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents has a good article in regards to using chrome monitor events.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionknoopxView Question on Stackoverflow
Solution 1 - JavascriptXaviView Answer on Stackoverflow
Solution 2 - JavascriptMalenxView Answer on Stackoverflow