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.
2
Answers
Here is how you can inspect the exact javascript that is being executed:
Steps:
(Ctrl + Shift + I)
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.
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.