Menu
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?
583
Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.
Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.
Capture a trace from Chrome on Android (with DevTools)Go to chrome://inspect?tracing on desktop chrome. Find the app to be traced, and click on the trace link beside the title. Click on "Record" at top left.
Method 1: Inspect Element Using Chrome Developer ToolsAt the top right corner, click on three vertical dots. From the drop-down menu, click on More tools -> Developer Tools. macOS users can use the shortcut – command + option + C and Windows users can use Control + Shift + C.
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)
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
