5

I am switching from debugging JS in Firefox to Chrome.

One thing that I am missing is this:

chrome-dev-tool-are-missing-even-handler-preview

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?

guettli
  • 25,042
  • 81
  • 346
  • 663
  • The closest thing is the "Event listeners" sub-panel https://puu.sh/EvvR1/f3955b12c1.png – wOxxOm Oct 22 '19 at 11:12
  • @wOxxOm I know this sub-panel. One plus point for firefox. But I can live without it. – guettli Oct 22 '19 at 13:15
  • Inspect the element then type $0 in the console and that event handler should appear. – Nathaniel Flick Oct 28 '19 at 06:34
  • I think this StackOverflow answer might help: [Stackoverflow question similar to yours](https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools) –  Nov 01 '19 at 05:20
  • I think this Stackoverflow answer might help: [I think this is similar question to yours](https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools) –  Nov 01 '19 at 05:22

3 Answers3

4

The feature you are looking for is available in google chrome dev tools

enter image description here

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.

Pranoy Sarkar
  • 1,965
  • 14
  • 31
  • 2
    They asked for it to be in the tree view directly. They apparently [already "know this sub-panel"](https://stackoverflow.com/questions/58502931/chrome-dev-tools-eventhandler-preview-in-html-window-missing#comment103338613_58502931) – Kaiido Oct 28 '19 at 04:47
  • 1
    This does not answer my question, since I want to see the "event" in the tree, not search for it in an extra tab. But you get the bounty, since there seems to be no solution (up to now). – guettli Nov 01 '19 at 08:57
0

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.

ss of developer options

jasonscript
  • 6,039
  • 3
  • 28
  • 43
Pratik Barot
  • 1
  • 1
  • 1
    I know this tab. Quoting the question "Is there a way to enable this feature (see event-handler in the tree) in chrome, too?" Sorry, everything you write is correct. But the question is different. – guettli Nov 01 '19 at 08:54
0

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:

Inspecting google from my chrome browser.

Heisenberg
  • 1
  • 2