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

xenium
xenium used Ask the Experts™
on
hi,

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?

http://enex.net/autorecon/fusion/GC_network.html

This is an aside to:
https://www.experts-exchange.com/questions/29118086/How-to-listen-for-click-event-on-google-fusion-chart.html

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
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 Ninja
Distinguished Expert 2018

Commented:
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 http://enex.net/autorecon/fusion/GC_network.html
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.

Regards,
Chinmay.

Author

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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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.

Author

Commented:
All the data for the graph appears to be stored here, this might give a clue:

google-data-viz.PNG
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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.

Regards,
Chinmay.

Author

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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial