How can I discover what JavaScript function is called when clicking on something on a page?

Question

I'm trying to deconstruct part of Gmail and can't seem to be able to find what is happening (what functions are called) when a specific button is clicked.

I used Google Chrome's inspector and found the HTML for the button:

<tbody id=":8y" class="vC " idlink="" role="option" aria-labelledby=":8x :8w"><tr class="vI"><td><img class="vt SFzvCe IRnhDe BUw1sf" id=":8x" src="images/cleardot.gif" alt="Call phone"></td><td id=":8v" class="vr" colspan="2"><span id=":8w" class="HHshnc ">Call phone</span></td></tr></tbody>

In the "Event Listeners" section of the inspector under "click" I got this information:

isAttribute: false
lineNumber: 213
listenerBody: function B(H){return g.call(B.src,B.key,H)}
node: tbody#:8y
sourceName: https://mail.google.com/mail/u/0/?ui=2&view=js&name=main,tlist&ver=q0qiADndhKA.en.&am=!k3sV9...
type: click
useCapture: true

but that doesn't help me understand what's being called onClick.

What I'm trying to do is create a Greasemonkey script that will add this button to Gmail when it doesn't exist on a page.

TIA!

Answer 1

function B(H){return g.call(B.src,B.key,H)}

is clearly only a wrapper function that calls g. Function.call

[c]alls a function with a given this value and arguments provided individually.

As you can read on the linked MDC page, the first argument is the this object inside g, in this case B.src. The second and third parameter are passed as parameters to g.

So, you'll have to look for a function named g. The toString method might be helpful.

That said, given the goal you're trying to reach (“create a Greasemonkey script that will add this button to Gmail when it doesn't exist on a page”), I think it's not worth your time. If the button doesn't exist, I suspect it doesn't exist for a reason (e.g., g not being available on that page, or some other back-end function).