How do I view events fired on an element in Chrome DevTools?

Question

I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.

How do I do that using Chrome Web Developer?

Answer 1

• Hit F12 to open Dev Tools
• Click the Sources tab
• On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
• Click on the events you want to listen for.
• Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

Answer 2

You can use monitorEvents function.

Just inspect your element ( right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write:

monitorEvents($0)

Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.

To stop getting this data just write this to console:

unmonitorEvents($0)

$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector ).

You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:

monitorEvents(document.body, 'mouse')

List of this available types is here .

I made a small gif that illustrates how this feature works:

Answer 3

Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here .

Answer 4

For jQuery (at least version 1.11.2) the following procedure worked for me.

1. Right click on the element and open 'Chrome Developer Tools'
2. Type $._data(($0), 'events'); in the 'Console'
3. Expand the attached objects and double click the handler: value.
4. This shows the source code of the attached function, search for part of that using the 'Search' tab.

And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)

Answer 5

This won't show custom events like those your script might create if it's a jquery plugin. for example :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"

Answer 6

I'm not a javascript expert, but this can be done fairly easily by modifying directly the document on reaction to specific events. I looked a bit at the current Sheets HTML and running the following code in the JavaScript console makes it highlight on mouse click:

function f() { let mylist = document.getElementsByClassName("selection"); for (let i=0; i<mylist.length; i++) { if (parseInt(mylist[i].style.height)>0 && parseInt(mylist[i].style.width)>0) { mylist[i].style.left='0px'; mylist[i].style.width='100000px'; mylist[i].style.display=null; break; }; }; }; onclick = f;

You can open the console with F12 on Chrome, then Click on the Console tab. You can close it afterward ( F12 or X button), the change will remain in effect until the page is closed or reloaded.

Of course Google can change the HTML & CSS at any time and break this, so ideally if this is really needed someone should maintain an extension and keep it updated with Sheet changes (there may be already generic extensions where this could be added easily, please comment if you know any).

The expanded and commented code, if you're interested in modifying or fixing it later:

function f() {

    // Get all element with class "selection"; there should be just a few of them,
    // and almost all should be have 0-width or 0-height
   let mylist = document.getElementsByClassName("selection")

   for (let i=0; i<mylist.length; i++) {

        // Find any selection element with an area (usually just one)
        if (parseInt(mylist[i].style.height)>0 && parseInt(mylist[i].style.width)>0) {

            // Set left to 0px (when you click on other cells than A)
            mylist[i].style.left = '0px';

            // Set width to something large so it take the whole screen
            mylist[i].style.width = '100000px'; // NB: very wide sheets could need more!

            // Undef the distlay attribute (normally, None
            mylist[i].style.display = null;

            // On multi-row selections we may match more than one, changing
            // anything but the first one breaks selection
            break;
        };
    };
};

// Run the function on every mouse click
onclick = f;

Answer 7

To list all event handlers on the window object in Chrome, you can type window.getEventListeners(window) or for a specific element window.getEventListeners(document.body)