How to use a browser inspect tool to discover events occurring during a webpage interaction


How can i interrogate a webpage to find out what events are triggers when i interact with it?

I see that Chrome and Edge both have fancy looking Inspect features. How could i use these to find out what events are triggered when i click on, or hover over, nodes on the following fusion chart?

This is an aside to:

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KimputerIT ManagerCommented:
Embedded picture shows all you need. Select which events (in your case, probably only mouse), click on the page itself, and the code will stop where it was fired.
This show all you need
Chinmay PatelChief Technology NinjaCommented:
Hi Xenium,

I use Opera and I think the method is usable for any other Chromium based browser (and maybe even for Edge).

Now, first and foremost, you will have to have patience as the code behind these charts is compressed(and maybe even obfuscated - not sure).

To be on safe side, I closed all other instances and opened an InPrivate session
1. Open
2. Press CTRL + SHIFT + I - this will open developer tools
3. Click on Sources tab
4.  You will be able to see a window as shown in the image below
 Sources Tab on DevTools5. In Sources tab, as shown below image, click on Event Listener Breakpoints
Eventlisteners in Sources Tab
Here select the event you want to observe and you will be able to track what exactly is going on in the JavaScript code.

xeniumAuthor Commented:
Thanks both. Looks like I'm going to need some more help on this. I'll send a private message see if there's any way to progress further.
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

xeniumAuthor Commented:
hi Chimney, thanks again for your input. I'm able to run through the 5 steps you outline, but then I'm stuck on how to pick up a click event.

On the performance tab, i can record then click on a node. Seems like function dispatchOnConnect is invoked but i'm not sure, does that look right?

Initially I'm looking for a way to pick up the name of the node that was clicked.
xeniumAuthor Commented:
All the data for the graph appears to be stored here, this might give a clue:

Chinmay PatelChief Technology NinjaCommented:
Hi Xenium,

Sorry for the delay. This one required some serious effort to be answered. Unfortunately, I could not make any progress. The data keeps changing on the fly - if you check DOM, you would realize this.

I was wondering, isn't there any API for this? I do not think such a complex system can function without public API.

Also, I was curious to understand what do you need to do after you know which element was clicked? Maybe we can figure out an alternative.

xeniumAuthor Commented:
hi Chinmay,

Thanks for having a go. This is google's fusion tables, it's a labs product without much support and there isn't an API as far as I'm aware.

I want to grab the click event so i can then display more details in a side panel. At the moment the only visible detail is the node name.

Some of the other fusion table charts have a tooltip property, but this appears to be inactive for this chart type. I may post this an aside in case there's any luck in that direction.

Apart from this I'm out of ideas.

Thanks again for your support.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.