How to inspect/research/understand the exact javascript code that is running in a opened webpage?

Question

I want to be able to inspect/understand and eventually alter javascript code that is running in opened webpages.

Do you know how can I see which js methods are currently running while the webpage is opened and inspect their variables?

I'm using Chrome, but I can switch to any other browser or tool that is closer to my goal.

I tried to use Chrome's Inspect, but I didn't find a section where it would display what is javascript doing in that exact moment.

Answer 1

Here is how you can inspect the exact javascript that is being executed:

Steps:

1. Open Developer Tools: (Ctrl + Shift + I)
2. Go to Sources Tab: This tab allows you to debug JavaScript code.
3. Play around with Call Stack: The "Call Stack" panel on the right-hand side of the Debugger tab shows you the stack trace, indicating which functions are currently executing.
4. Scope Variables: You can inspect the values of variables in the "Scope" panel while the code is paused at a breakpoint.

Also, you can add breakpoints by clicking on the line number in the source code panel. When the execution of the code reaches a breakpoint, it pauses, allowing you to inspect the variables and step through the code.

Answer 2

I believe Chrome's developer tool itself is enough to do most of the stuffs that you mentioned. Right click on the webpage and select "Inspect" or press Ctrl+Shift+I to open the Developer Tools.

You can achieve it by setting breakpoints in the debugging mode. You can also track variables real-time and also step-over each line of code to see how it works.

The "Console" tab is also useful for debugging. You can log variables, execute JavaScript code, and interact with the page in real-time.