How to monitor React events while debugging

Question

How can I check what React events are fired in particular situations?

I am developing a react component which uses Ag grid react internally. Ag Grid React has events like rowDataChanged, rowDataUpdated. While debugging, I am interested to know which Ag Grid events are fired.

Is it possible in Chrome? Or is there any other tool to check this?

Answer 1

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