Imagine you want to figure out how some interesting feature on a website works. The challenge is that on modern websites, the client-side JavaScript code is usually minified and obfuscated, making the research quite difficult.
Check out how the Chrome Performance tool can help you study twisted JS code.
Problem
I’m currently working on the React Donut chart with a big focus on accessibility (A11y). As an example, I took this chart. The problem is that I could not figure out how they managed to make the donut navigable with the keyboard arrows. Is it some combination of ARIA attributes or JS code involved? A deep dive into the code was needed.
Of course, the JS bundles were obfuscated, so I decided to give the Profiled a try.
Profiling
The plan is the following
- Start profiling
- Do some actions on the website to trigger the code I want to research (press the keyboard keys in my case )
- Stop profiling
- Analyze the generated diagram.
The diagram has the Interactions section that tracks keyboard events. Let’s zoom and scroll to the Arrow Key event I need.
The bars on the diagram are clickable.
The summary of a selected bar is displayed below the diagram. If the selected bar represents a JS function, the profiler shows the link to the code. It’s amazingly helpful.
Here is the keyboard event handler that I was looking for.
Now, the Source tab shows me the exact function in the JS bundle that handles the event. The Profiles saved me a lot of time. No need to look through the huge codebase and obfuscated bundles. The function is located and I can proceed with my research.
Bonus
Also, the profiler shows the setTimeout statement which caused the function execution. Very helpful in some cases.
Top comments (0)