thomasleveil · October 17, 2022 07:44
diff --git a/README.md b/README.md
diff --git a/index.js b/index.js
 window.getEventListenersStats = function(selectorOrNode) {
  var domElements = [];
  if (selectorOrNode instanceof Node || selectorOrNode instanceof Window) {
    domElements = [selectorOrNode];
  } else {
    domElements = Array.from([window, document, ...document.querySelectorAll(selectorOrNode || '*')])
  }

  return domElements.reduce(function(pre1, dom){
      var listeners = getEventListeners(dom);
      var eventTypes = Object.keys(listeners);

      var [handlersByType, nbHandlers] = eventTypes.reduce(function([preHandlersByType, preNbHandlers], eventType) {
        
        var nbHandersForThisType = listeners[eventType].length;

        if (!(eventType in preHandlersByType)) {
          preHandlersByType[eventType] = 0;
        }
        preHandlersByType[eventType] += nbHandersForThisType;

        preNbHandlers += nbHandersForThisType;

        return [preHandlersByType, preNbHandlers];
      }, [pre1.handlersByType, 0]);

      pre1.handlersByType = handlersByType;
      pre1.handlers += nbHandlers;
      pre1.domElementWithListeners += nbHandlers > 0 ? 1 : 0;

      return pre1;
    }, {
      domElementWithListeners: 0, 
      handlers: 0,
      handlersByType: {}
    })
 };
 console.info(`%c🦄 getEventListenersStats()
 %cUsage: %cgetEventListenersStats(<optional: domNode>)

 %cMore info at https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/`,
  "background: yellow; color: blue; font-size: 18pt", 
  "font-size: 16pt; font-weight: bold", 
  "color: darkgray; font-size: 14pt; font-family; Consolas",
  "color: lightgray; font-size: 12pt"
 );
 alert("You can now use `getEventListenersStats()` in the Chrome console");
diff --git a/install.html b/install.html
 <html>
  <head>
    <title>`getEventListenersStats()` Chrome bookmarklet</title>
  </head>
  <body>
    
    <h1>`getEventListenersStats()` Chrome bookmarklet</h1>
    
    <p>Just drag this link to your bookmark bar in Chrome.</p>
    <p>
      <a id="myBookmarklet1" href="javascript:alert('💩 something went wrong')"><button>getEventListenersStats()</button></a>
    </p>
    <script>
    var linkId = "myBookmarklet1";
    var gistLink = "https://gist.githubusercontent.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/raw/index.js";
    fetch(gistLink).then(function(response) {
        if (!response.ok) {
            //alert("Error fetching "+response.statusText);
        }
        else {
            response.text().then(function(text) {
                var link = document.getElementById(linkId);
                link.href = "javascript:"+encodeURIComponent("(function(){"+text+"})()");
            });
        }
    }); 
    </script>
    
    <h2>Source code & Howto</h2>
    <a href="https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/">https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/</a>
    
  </body>
 </html>
	window.getEventListenersStats = function(selectorOrNode) {
	var domElements = [];
	if (selectorOrNode instanceof Node \|\| selectorOrNode instanceof Window) {
	domElements = [selectorOrNode];
	} else {
	domElements = Array.from([window, document, ...document.querySelectorAll(selectorOrNode \|\| '*')])
	}

	return domElements.reduce(function(pre1, dom){
	var listeners = getEventListeners(dom);
	var eventTypes = Object.keys(listeners);

	var [handlersByType, nbHandlers] = eventTypes.reduce(function([preHandlersByType, preNbHandlers], eventType) {

	var nbHandersForThisType = listeners[eventType].length;

	if (!(eventType in preHandlersByType)) {
	preHandlersByType[eventType] = 0;
	}
	preHandlersByType[eventType] += nbHandersForThisType;

	preNbHandlers += nbHandersForThisType;

	return [preHandlersByType, preNbHandlers];
	}, [pre1.handlersByType, 0]);

	pre1.handlersByType = handlersByType;
	pre1.handlers += nbHandlers;
	pre1.domElementWithListeners += nbHandlers > 0 ? 1 : 0;

	return pre1;
	}, {
	domElementWithListeners: 0,
	handlers: 0,
	handlersByType: {}
	})
	};
	console.info(`%c🦄 getEventListenersStats()
	%cUsage: %cgetEventListenersStats(<optional: domNode>)

	%cMore info at https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/`,
	"background: yellow; color: blue; font-size: 18pt",
	"font-size: 16pt; font-weight: bold",
	"color: darkgray; font-size: 14pt; font-family; Consolas",
	"color: lightgray; font-size: 12pt"
	);
	alert("You can now use `getEventListenersStats()` in the Chrome console");
	<html>
	<head>
	<title>`getEventListenersStats()` Chrome bookmarklet</title>
	</head>
	<body>

	<h1>`getEventListenersStats()` Chrome bookmarklet</h1>

	<p>Just drag this link to your bookmark bar in Chrome.</p>
	<p>
	<a id="myBookmarklet1" href="javascript:alert('💩 something went wrong')"><button>getEventListenersStats()</button></a>
	</p>
	<script>
	var linkId = "myBookmarklet1";
	var gistLink = "https://gist.githubusercontent.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/raw/index.js";
	fetch(gistLink).then(function(response) {
	if (!response.ok) {
	//alert("Error fetching "+response.statusText);
	}
	else {
	response.text().then(function(text) {
	var link = document.getElementById(linkId);
	link.href = "javascript:"+encodeURIComponent("(function(){"+text+"})()");
	});
	}
	});
	</script>

	<h2>Source code & Howto</h2>
	<a href="https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/">https://gist.github.com/thomasleveil/c280d8a6f77682a2d15c11e0e11846a8/</a>

	</body>
	</html>