feat: capture before/after values for changed props/state/hooks during profiling
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 30/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Necesita aclaración
- Estado de actividad
- Estancado
- Stack tecnológico
- react, typescript
- Área
- developer-experience, devtools
Línea de trabajo
Lee issue #18 y devtools-bridge.ts:103-126 y :131 para entender el profiling de claves modificadas e inspectElement. Compara los enfoques snapshot, targeted-watch y direct-fiber, y después define qué enfoque y qué comportamiento de rendimiento/precisión aceptará la funcionalidad; actualmente, el issue no especifica una única implementación ni una única prueba.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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 —
inspectElementalready works over the DevTools WebSocket protocol - Con:
inspectElementis 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: truewhich only enables key name tracking (devtools-bridge.ts:131)
- Lenguaje dominante
- TypeScript
- Estrellas
- 243
- Forks
- 12
- Merge medio
- 11 h 22 min
- PR fusionados (30 d)
- 2
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de callstackincubator/agent-react-devtools
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 42/100
-
enhancement
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
callstackincubator/agent-react-devtools#56 · 1 comentario ·
-
enhancement
Dificultad 4/5 3-5 días Aptitud para principiantes 45/100
Todos los issues de callstackincubator/agent-react-devtools
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
bug v2
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
modelcontextprotocol/inspector#2458 · 1 comentario ·
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
carbon-design-system/ibm-products#9907 ·