Bookmarklets

Event Listener Viewer

bookmarklets Web Dev Debugging

The Event Listener Viewer bookmarklet is a powerful tool for inspecting JavaScript event listeners on any webpage, helping you understand and debug event handling.

Complete Event Listener Analysis

This bookmarklet provides a detailed view of all event listeners attached to elements on the page, including their types, functions, and configuration options.

javascript:!function(){const n=document.getElementsByTagName("*"),t=[];function e(n){const t=[];for(;n&&n.nodeType===Node.ELEMENT_NODE;){let e=n.nodeName.toLowerCase();n.id?e+=`#${n.id}`:n.className&&(e+=`.${n.className.split(" ").join(".")}`),t.unshift(e),n=n.parentNode}return t.join(" > ")}function o(n,t){if(window.jQuery&&n.jquery){const e=jQuery._data(n,"events");if(e&&e[t])return e[t].map((n=>({type:t,function:n.handler.toString(),useCapture:!1,passive:!1})))}const e=n[`on${t}`];return e?[{type:t,function:e.toString(),useCapture:!1,passive:!1}]:[]}for(const i of n){["click","submit","change","input","keyup","keydown","mouseover","mouseout","load","error"].forEach((n=>{const s=o(i,n);s.length>0&&t.push({element:e(i),tagName:i.tagName.toLowerCase(),id:i.id||"No ID",classes:i.className||"No classes",listeners:s})}))}const i=document.createElement("div");i.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        width: 600px;\n        max-height: 80vh;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        overflow-y: auto;\n    ",i.innerHTML=`\n        <div style="margin-bottom: 15px;">\n            <strong>Event Listener Viewer</strong>\n            <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 20px;">\n            <strong>Total Elements with Event Listeners: ${t.length}</strong>\n        </div>\n        <div style="margin-bottom: 20px;">\n            ${t.map((n=>`\n                <div style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                    <div style="margin-bottom: 5px;">\n                        <strong>Element:</strong> ${n.element}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Tag:</strong> ${n.tagName}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>ID:</strong> ${n.id}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Classes:</strong> ${n.classes}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Event Listeners:</strong>\n                        ${n.listeners.map((n=>`\n                            <div style="margin-left: 15px; margin-top: 5px;">\n                                <div>Type: ${n.type}</div>\n                                <div>Function: ${n.function}</div>\n                                <div>Use Capture: ${n.useCapture}</div>\n                                <div>Passive: ${n.passive}</div>\n                            </div>\n                        `)).join("")}\n                    </div>\n                </div>\n            `)).join("")}\n        </div>\n        ${0===t.length?'\n            <div style="color: #4CAF50;">\n                No event listeners found on this page.\n            </div>\n        ':""}\n    `,document.body.appendChild(i)}();
Drag me to bookmark bar: 👉🏻 Event Listener Viewer

Why Use Event Listener Viewer?

The Event Listener Viewer bookmarklet is essential for web developers who need to understand and debug event handling on their pages. It helps identify event listeners, their configurations, and potential issues with event handling, making debugging easier and more efficient.