How to find out what JavaScript ran

How to find out what JavaScript ran

Very frequently I’m trying to track down where code lives for a particular part of the web page. For some JavaScript features this is hard! How can you find out what JavaScript ran when something happened?

Take for example an issue I was working on this morning. There was a table that would allow me to press Enter while in a cell, and it would save that row. There was a bug in this feature, so I needed to know where the code lived so I could see what was going on. This table has a mixture of non-framework code and React. I wasn’t familiar with the code base.

The listener for the Enter keypress could have been a React prop, or it could have been an event listener on the body or table. It could have been in any manner of NPM packages. It could have been anywhere! How was I supposed to find the function that was executed on Enter?

This may not always work, but this 10-step method was effective for me this morning:

1. In Chrome, load up the app in question.
2. Open up the developer tools.
3. Click on the Performance tab.
4. Check the Screenshots box.
5. Click on Record.
6. Returning to the app itself, perform the action of interest (pressing Enter on the keyboard).
7. Click Stop in the Performance tab.
8. Hover over the screenshot timeline until you find the exact time in which I pressed Enter.
9. Look at the JavaScript actions that took place during that time.
10. Click on an action to get a description of what function ran and where that code can be found.

Here is a screenshot showing these steps.

Using this Performance tab, you can find out what JavaScript has ran during a given period of time.