What's the monitorEvents() equivalent for Firefox?

Question

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?

score 18 · Accepted Answer · edited May 28 '19 at 03:09

18

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

edited May 28 '19 at 03:09

ian

12,003
9
51
107

answered Jun 03 '18 at 13:50

Pawan Singh

824
6
13

3

This will only log all events that the element can handle. If you're (like me) trying to see all the events are happening inside an element (such as the body), you should log during the capture phase - `element.addEventListener(eventName, log, true);` – Vlad274 Aug 27 '19 at 16:23

Timo Tijhof · Answer 2 · 2022-07-11T22:00:12.250

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);
    }
  }
}

What's the monitorEvents() equivalent for Firefox?

2 Answers2