Skip to content

[DevTools] Filter snapshots by selected subtree #33973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

s-h-a-d-o-w
Copy link

@s-h-a-d-o-w s-h-a-d-o-w commented Jul 23, 2025

Summary

I recently experienced some frustration profiling a Next.js app because roughly half of the snapshots came from things like hotreload (despite nothing being hot reloaded) and the Nextjs devtools logo animation.

While getting rid of that noise was my initial motivator and might sound like something to suggest to the Next.js team to improve, I figure that this could also be helpful for people with complex apps where interactions may trigger updates outside of the thing that they want to analyze.

I would also argue that this simply makes sense behaviorally - that when you zoom in to something, the work context becomes about that zoomed in content.

Presumably, you have that for ... of linting rule because you don't want it used for arrays? Since I'm using Set here, I figured it would be fine to disable. Please let me know if I should iterate differently.

Additional things I've been considering:

  • Making it so that when something is zoomed in on and there's are snapshots where it renders but we're currently not on one of those, the closest or next valid snapshot is automatically selected.
  • Adding an option to enable/disable this filter.

(Since it's pretty simple code-wise, I thought I would pitch this draft right here instead of opening an issue. I appreciate that you want tests but I would like to know whether you even want to land this before adding one. 🙂)

How did you test this change?

chrome_48bJzEIVqn.mp4

How exactly did you verify that your PR solves the issue you wanted to solve?

As shown in the video, I recorded a profile where multiple branches of the overall tree are affected and checked whether the list of snapshots is correctly narrowed when zooming in.
(I also zoomed in on branches that didn't render at all to ensure nothing breaks. In that case, it says "No commits".)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants