intercept *.addEventListener for debugging

100%

intercept *.addEventListener for debugging

✓ Published0🌍 Public

Last edited Aug 6, 2015

Created on Aug 5, 2015

This example demonstrates how to intercept and log every `addEventListener` call on HTML element prototypes for debugging purposes. It enumerates all `HTML*` interfaces from `window`, then wraps each prototype’s `addEventListener` method to print the event type, listener, and `useCapture` flag, followed by a stack trace via `console.trace()`. The code uses native browser APIs like `Object.getOwnPropertyNames`, `window`, and prototype manipulation, with no external libraries, and is based on a Stack Overflow solution adapted for Firefox.

AI-generated description

Similar vizzes

Loading thumbnail…

JS Bin

This example demonstrates how to intercept and log method calls on a JavaScript object while preserving the original function’s behavior. It shows a `User` class with a `trackAction` method that makes an AJAX request, then overrides that method on an instance to print the function’s arguments to the browser console. The code uses ES6 classes, arrow functions, `Array.prototype.slice` to convert arguments, and `Function.prototype.apply` to maintain the correct `this` context. The output appears in the console, illustrating a common debugging or instrumentation pattern.

Aalessioalex

62% match

Loading thumbnail…

Cross-browsers events listener implementation

This example shows a cross-browser event listener abstraction that normalizes how JavaScript attaches and removes DOM event handlers. The code defines an `addListener` and `removeListener` pair, then initializes them by detecting the available API at runtime. It uses the standard `window.addEventListener` and `removeEventListener` methods when supported, falls back to Internet Explorer’s `document.attachEvent` and `detachEvent` with an `'on'` prefix, and finally uses direct `el['on' + type]` property assignment for older browsers. The logic is contained in a single self-invoking object that returns itself, ready for use without any external libraries.

Aabernier

62% match

Loading thumbnail…

JS Bin

This example demonstrates how to intercept and log method calls on a JavaScript object without altering the original function's behavior. It shows a `User` class with a `trackAction` method, which is replaced with a wrapper that logs the arguments to the console while still invoking the original method using `apply` to preserve context. The code relies on ES6 classes, arrow functions, and `Array.prototype.slice` to handle arguments, with output visible in the browser console.

Aalessioalex

59% match

Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

JJastor11

58% match

Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM

57% match

Loading thumbnail…

Gist 58d08353ae4a8a72f84a

This example demonstrates a debugging technique for retrieving a JavaScript stack trace from a Node.js process stuck in an infinite loop. It shows the step-by-step process of attaching GDB to the running process, setting a breakpoint at `v8::internal::Runtime_StackGuard`, and triggering `v8::V8::TerminateExecution` to reach a safe point where V8 can print the trace via `V8_Fatal`. The output reveals the JavaScript call stack, including function names and file locations.

Aalessioalex

56% match

Loading thumbnail…

Testa

This example demonstrates a simple interactive event-handling pattern for HTML links. Two links, each bound to a separate instance of a JavaScript `Obj` constructor, respond to clicks by logging a greeting to the console. The code relies on native DOM APIs such as `document.getElementById` and the `onclick` property, while closures capture each instance’s current `word` property. The first link logs “Hola testa” after the property is reassigned, while the second logs “Hello testa,” illustrating how per-instance state persists. No external libraries or data sources are used; the behavior is purely client-side.

DDylanFM

55% match

Loading thumbnail…

Gist d4a6d55663d524237c14

This example demonstrates a JavaScript module that automatically instruments an object’s methods to log their arguments and return values to the browser console. It uses the `underscore` library to chain through the object’s functions, wrapping each method with `console.group` and `console.log` calls. The wrapper takes a module and an identifier, replacing each original method with a logging version that preserves the original behavior. The code shows the pattern for debugging or tracing method calls in a modular JavaScript application.

TThomasG77

55% match