Question

Is there a way to intercept all the UI (touch/click etc) events in the browser (for monitoring/debugging etc) – in JavaScript code and in any Chrome tools – all goes. As an example, I want to mark some event (by adding some property) and catch it when it is handled (even more than once) to see the stack trace etc

Update: Looking for intercept every event even if is not propagated (bubbled/captured) somewhere in the code.

Answer 1

You can get the list of event types from the Event constructor.

Object.keys(Event).forEach(function (etype) {
    document.addEventListener(
        etype.toLowerCase(), console.log.bind(console), false
    );
});

The event type constants exposed by the Event interface are the following (in the desktop Safari):

["MOUSEOUT", "FOCUS", "CHANGE", "MOUSEMOVE",
 "SELECT", "BLUR", "KEYUP",   "MOUSEDOWN", "MOUSEDRAG",
 "MOUSEUP", "MOUSEOVER", "CLICK", "DBLCLICK",
 "KEYDOWN", "KEYPRESS", "DRAGDROP"]