I am switching from debugging JS in Firefox to Chrome.
One thing that I am missing is this:
In Firefox I can see in the HTML see "[event]" that there is a custom event handler attached.
I think this preview is very handy.
In chrome I need to explicitly search for the event handler.
Is there a way to enable this feature (see event-handler in the tree) in chrome, too?
The feature you are looking for is available in google chrome dev tools
I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,
If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.
Hope this is what you are looking for.
it's available in chrome you can find it in developers option press
(CTRL+SHIFT+I) or F12
and then you will find tab named "Event Listener" in right hand upper corner if developer options is in full screen mode or else you'll find it it lower right corner.
And if you are unable to find that just simply find the >> symbol and click on it and select Event Listeners.
Here is the image for event listeners tab.
I think you can use getEventListners($0) api of chrome which gives the event listners of the particular selected element.
getEventListners($0) where $0 - The selected element in the DOM.
The console drawer can be added to the Elements tab by clicking on Esc key it will toggle the console drawer.Then in the console you can write getEventListners($0) as shown in the image.
As this is my first answer and don't have that much reputation as of now,it is not allowing me to directly add the image to the answer so I am really sorry for that. Please have a look at the image:
