Event Logger/Listener

/**
 * Custom Event Logger
 * 
 * This script monitors and logs all custom events fired on any element.
 * It uses a MutationObserver to watch for new elements and attaches
 * event listeners to both existing and newly added elements.
 */

(function() {
  // Store the original dispatchEvent method
  const originalDispatchEvent = EventTarget.prototype.dispatchEvent;
  
  // Override the dispatchEvent method to intercept all event dispatches
  EventTarget.prototype.dispatchEvent = function(event) {
    // Only log custom events (those not starting with standard event prefixes)
    const standardEventPrefixes = [
      'mouse', 'pointer', 'key', 'touch', 'focus', 'blur', 'input', 
      'change', 'submit', 'scroll', 'resize', 'load', 'unload', 'DOMContent',
      'animation', 'transition', 'drag', 'drop'
    ];
    
    const isStandardEvent = standardEventPrefixes.some(prefix => 
      event.type.toLowerCase().startsWith(prefix.toLowerCase())
    );
    
    if (!isStandardEvent) {
      let targetInfo = '';
      
      // Try to get some identifying information about the target
      if (this instanceof Element) {
        targetInfo = this.tagName.toLowerCase();
        
        if (this.id) {
          targetInfo += `#${this.id}`;
        } else if (this.className && typeof this.className === 'string') {
          targetInfo += `.${this.className.split(' ')[0]}`;
        }
      } else {
        targetInfo = this.constructor.name || 'Unknown';
      }
      
      // Log the event details
      console.group(`%cCustom Event: ${event.type}`, 'color: #2196F3; font-weight: bold;');
      console.log(`Target: ${targetInfo}`);
      console.log('Event detail:', event.detail);
      console.log('Full event object:', event);
      console.log('Target:', this);
      console.groupEnd();
    }
    
    // Call the original method to maintain normal behavior
    return originalDispatchEvent.call(this, event);
  };
  
  console.log('%cCustom Event Logger activated', 'color: #4CAF50; font-weight: bold; font-size: 14px;');
  console.log('Monitoring for custom events on all elements...');
  
  // Optional: Test the logger by dispatching a custom event
  setTimeout(() => {
    const testEvent = new CustomEvent('test-logger', { 
      detail: { message: 'This is a test custom event' } 
    });
    document.dispatchEvent(testEvent);
  }, 500);
})();