how to use react devtools to get function tied to an onClick event listener

Question

I want to use react devtools to see the source code of an onClick function on a website, specifically, wanderu.com

Please note I am new to react devtools and do not possess yet a good understanding of how this works. I've spent about 2 hours trying to figure this out

On the site in between the destination fields there is an image tag that when clicked, it changes the order of the destinations:

I want to use react devtools to find the code to see how this works.

When I open this in the react dev tools, I can see the following:

When I expand the onClick tab, it doesn't show me anything.

Why? How come in this tab I cannot see the function that onClick is tied to?

When I step back and look at the component, I can see the props of the component that contains this feature:

But I don't see how or where to find the function that is responsible for switching the two input fields.

Google search of "get onclick function react devtools" and relevant keywords doesn't give helpful results in regards to see a function tied to an eventlistener in context of react, just vanilla JS.

In context of React and React devtools, how do you see a function that is tied to an event listener?

Answer 1

One way to begin this task is to set an event breakpoint.

Go into the "Sources" tab in devtools, expand "Event Listener Breakpoints", find and expand "Mouse" and select "click". This will cause the code on that page to pause execution and you can inspect the code involved.

I tried this out on the website you provided and found the code to be minified/obfuscated which as you can expect, makes debugging and reverse engineering difficult, but not impossible.