[DevTools] Filter snapshots by selected subtree #33973
Open
+71
−3
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
(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
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".)