CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefoxdevtools
Eduardo06sp
Eduardo06sp

Reputation: 361

What's the monitorEvents() equivalent for Firefox?

Chromium has a feature where you can run monitorEvents(document) and every event you fired will be logged in the console.

How can I get similar functionality in Firefox?

I came across this very outdated answer, but Firebug doesn't even exist anymore: Using Firefox, how can I monitor all events that are fired?

Upvotes: 19

Views: 8951

Answers (2)

Timo Tijhof
Timo Tijhof

Reputation: 10307

The following one-liner is the plain JS equivalent of monitorEvents(document) in Chrome DevTools, which also works in Firefox:

// https://stackoverflow.com/a/72945018/319266
for (const key in document) if (key.startsWith('on')) document.addEventListener(key.slice(2), console.log);

Or as function, simplified from Paul Kinlan's original 2016 blogpost:

// https://stackoverflow.com/a/72945018/319266
function monitorEvents(element) {
  for (const key in element) {
    if (key.startsWith('on')) {
      element.addEventListener(key.slice(2), console.log);
    }
  }
}

I recommend bookmarking the one-line snippet rather than the function, since the one-liner actually does what one typically wants (monitor the document) rather than only defining a function.

The benefit of a function is to be able to monitor only part of the page (to reduce noise from unrelated areas), and to be able to unmonitor it without having to reload the page. Below is a modified version that includes the missing unmonitorEvents() function to do exactly that.

// Usage:
// monitorEvents(document)
// monitorEvents(document.querySelector('#app'))
// unmonitorEvents(...)
//
// https://stackoverflow.com/a/72945018/319266
function monitorEvents(element) {
  for (const key in element) {
    if (key.startsWith('on')) {
      element.addEventListener(key.slice(2), monitorEvents.log);
    }
  }
}
monitorEvents.log = (e) => console.log(e);
function unmonitorEvents(element) {
  for (const key in element) {
    if (key.startsWith('on')) {
      element.removeEventListener(key.slice(2), monitorEvents.log);
    }
  }
}

Upvotes: 1

Pawan Singh
Pawan Singh

Reputation: 864

You can try this

function monitorEvents(element) {
  var log = function(e) { console.log(e);};
  var events = [];

  for(var i in element) {
    if(i.startsWith("on")) events.push(i.substr(2));
  }
  events.forEach(function(eventName) {
    element.addEventListener(eventName, log);
  });
}

Source --- https://paul.kinlan.me/monitoring-all-events-on-an-element/

Or if you want to monitor events on a specific DOM element(s) you can try this --- Examine Event Listeners on MDN

Upvotes: 21

Related Questions