Develop Reference

How to see what processes are occurring when a button is clicked on a webpage?

I am currently trying to scrape some data from the trading dashboard on Plus500. The information I am interested in is only visible (on the right-hand side) when the 'Information' button is clicked next to a particular security, as shown in the screenshot below:
I have so far written some basic JavaScript which clicks on the information button next to each security on the page and attempts to scrape the data in the info pane. However, when the 'Information' button is clicked it takes a few seconds for the new data to load:
As a consequence, my Javascript is scraping from the info panel before it has loaded and the information it is collecting is incorrect. This means that I am now trying to work out how to tell my Javascript to wait until the new data has loaded.
I suspected (perhaps incorrectly) that an Ajax request was being used to fetch this new information. However, looking at Fiddler, no such processes are being captured when I click the info buttons.
I also wondered whether the information was all already there on the page, but hidden until the info button was clicked. This would explain why I cannot see an Ajax request being made in Fiddler. However, a brief inspection of the HTML seemed to suggest that this was not the case.
To avoid the guess-work, how can I definitively find out what process(es) are being run when I click these 'information' buttons?
NB: If anyone thinks there is a better way to be scraping this data then please let me know!
Cheers.

Use breakpoints in the JS debugger of your browser:
Open the dev tools of your browser (usually F12)
Go to the tab "Debugger" (Firefox) or "Sources" (Chrome/WebKit)
Find the panel for breakpoints (rightmost panel or bottom left panel depending on your dev tools dimensions)
Navigate to Event Listener Breakpoints -> Mouse and there you can set a breakpoint for all click events
Now whenever you make a click that has a JS event listener, the JS debugger will halt in the JS code of the listener and you can debug it. Since most websites minify their JS code, you might have to fight through an unreadable mess, but at least it's a start.
You can also see all event listeners for a node in the DOM inspector:
Firefox: The DOM inspector shows a small bubble "event" next to each node with event listeners. Click on it to list all listeners bound to this node. Note that events might bubble up and be handled by a higher node, so there might be an event listener not shown at the node directly still handling events for the node.
Chrome: Select the node, then in the right panel go to the tab "Event Listeners" and select the event type you are interested in.

Web page parsing basics

everyone.
I need to parse web page, that is result of search request. I write Python script. So I need to fake search button click. So here's my question:
How can I find what script is run when the button is clicked?
The button code is (as I found in page inspection in Chrome):
<div class="submit button" data-ember-action="2">Search</div>
I feel that I should read more. I'll be grateful for ideas what direction to dig for.
The second is who to get script output. But, perhaps, the answer for the first question will be the answer for both

You can use Google Chrome's Developer Tools/Inspector to set a breakpoint that listens for any click. Once you set that breakpoint, you can click the button in Google Chrome and get more insight.
Here is a link that can show you how to get to the Google Chrome Developer Tools/Inspector (AKA DevTools).
Once you have the DevTools open, Click on the Sources tab near the top, then expand the Event Listener Breakpoints accordion. Next, you can expand the Mouse accordion and activate the click event listener breakpoint by checking the box next to it.
After that, you can go back to the web page and click the button to stop the application in its tracks. From there you can use the debugger to step through the code and see more information about the application.

You will need to run the JS for that, not just read the page code.
So use something like Spalsh: https://splash.readthedocs.io/en/stable/ for javascript rendering. Then you can inspect the JS events more like you did in Chrome.
For a real Chrome inspection experience use headless Chrome: https://developers.google.com/web/updates/2017/04/headless-chrome

how to debug javascript element (like a button)

It sound like a simple debug question but I cannot find the solution.
On a web browser like chrome, in the dev panel, I would like to inspect an element (like a button) and then ask chrome to find the corresponding javascript events on the page / file (in order to place breakpoint or to look at the code).
How can I do that ? (without fireing the event and checking the timeline as proposed by #dev3078 in this post How do I monitor what Javascript is being triggered when I click an element in a webpage?). I'd like to have, as in IDE, a 'goto javascript events declaration' !

go to sources, on the right side you'll see a dropdown called Event Listener Breakpoints, expand Mouse Events and select click, when you click on your Dom button, dev tools will go into debugging mode inside the first function called after the click event, you can also choose more events other than click

Recognize which JS script is performing the event

I don't know if there is a way to recognize which JS script is performing the action which is in progress in a page?! For example, when we click on a button, it's doing something using javascript. But how to know which script and even which line of the script are involved in this event?!

for this kind of task i can suggest you to use google chrome, its developer tools offer a lot of functonality that most of us dont even use or know.
just open up your page, then hit F12 to open developer tools. find and click Sources tab, there you will see a tree mapping all the files in your site, then look at the right upper corner of the dev tools, there you will find handlers for your events, and under it a list of event you can look into and pause, next to the pause button its a really useful button "Step over next function call" this will take you through every event related to the JS execution. in this list you will find at the bottom a tab that say "Event Listener Breakpoints" just expand it and you will find every event javascript can check, just look for the events you need, ie. find Mouse, expand it and check click, so in every 'click' the execution stops and you can see whats going on. or just check the whole Mouse event list and it will pause at every mouse event.

See which functions of a chrome extension are being called

I'm trying to understand the code of a chrome extension I did not write. This extension is active the entire time and working in background. Now I'd like to see which functions are being called on the different actions I do on websites.
I got so far that I have to use the Debugging Console which I open with Ctrl+Shift+I, but how exactly do I have to do this?

I would try using the "Event Listener Breakpoints". You can get to it under the sources tab on the right hand side. Just expand desired section.
For example, if you want to track a click event on a button, expand Event Listener Breakpoints -> Expand Mouse -> Select 'click'. Upon clicking the button in the tool, it should stop in the code where the action is handled.
It is worth noting that the code will probably be minified, so reading it might not be trivial.