Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

feat: capture before/after values for changed props/state/hooks during profiling

Ouverte
  • Quelque chose ne va pas ?
#30 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
30/100
Type d'issue
Fonctionnalité
Clarté
À clarifier
Activité
À l'abandon
Stack technique
react, typescript
Domaine
developer-experience, devtools

Piste de recherche

Lisez l’issue #18 ainsi que devtools-bridge.ts:103-126 et :131 pour comprendre le profiling des clés modifiées et inspectElement. Comparez les approches snapshot, targeted-watch et direct-fiber, puis définissez quelle approche et quel comportement en termes de performances/précision la fonctionnalité acceptera ; l’issue ne spécifie actuellement ni une implémentation unique ni un test unique.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

enhancement

Problem

Issue #18 surfaces the names of changed props/state/hooks in profiling output (e.g. props: onClick, className), but not their actual values. Knowing that className changed is useful, but knowing it changed from "btn" to "btn active" would be far more actionable for debugging.

The React DevTools profiling protocol only sends key names — values are not included by design (to keep profiling lightweight).

Possible approaches

Option A: Snapshot-based diffing (heavy, comprehensive)

During profiling, call inspectElement() after each commit for every component that changed. Store snapshots and diff consecutive ones to reconstruct before/after values.

  • Pro: Uses existing infrastructure — inspectElement already works over the DevTools WebSocket protocol
  • Con: inspectElement is async over WebSocket. Calling it for every changed component after every commit adds significant overhead and could slow profiling on busy apps
  • Con: "Before" values are approximated (previous snapshot), not true pre-commit values
Option B: Targeted watch mode (practical middle ground)

Let the user specify components to watch during profiling (e.g. profile-watch @c5). Only snapshot those specific components after each commit, reducing overhead.

  • Pro: Practical performance trade-off — overhead scales with watched components, not total tree size
  • Pro: User explicitly opts in, so the cost is expected
  • Con: Requires knowing which components to watch upfront (could combine with a post-hoc "inspect the top offenders" step)
Option C: Direct fiber access (fragile, precise)

Inject custom code into the page that reads fiber.memoizedProps / fiber.pendingProps during onCommitFiberRoot to capture true before/after values at commit time.

  • Pro: Would give true before/after values with no async overhead
  • Con: Very fragile — fiber internals are not a public API and break across React versions
  • Con: Requires forking or monkey-patching React DevTools backend code
  • Con: Significant implementation complexity

Context

  • Depends on #18 (surface changed key names first)
  • The tool connects to React via the DevTools wire protocol over WebSocket (devtools-bridge.ts)
  • inspectElement() can already fetch full props/state/hooks on demand (devtools-bridge.ts:103-126)
  • Profiling uses recordChangeDescriptions: true which only enables key name tracking (devtools-bridge.ts:131)
Langage dominant
TypeScript
Étoiles
249
Forks
13
Merge moyen
11 h 22 min
PR mergées (30 j)
2

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstackincubator/agent-react-devtools

Toutes les issues de callstackincubator/agent-react-devtools

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.