mirror of
https://github.com/jlengrand/Maestro.git
synced 2026-03-10 08:31:19 +00:00
docs: consolidate React DevTools profiling guide in CONTRIBUTING.md
Move React DevTools profiling instructions from CLAUDE-PERFORMANCE.md to CONTRIBUTING.md under the Profiling section: - Full installation and launch commands - Components and Profiler tab descriptions - Step-by-step profiler workflow - Chrome DevTools Performance tab guidance CLAUDE-PERFORMANCE.md now references CONTRIBUTING.md for profiling workflow (keeping it focused on code patterns for AI). Claude ID: 286ae250-379b-4b74-a24e-b23e907dba0b Maestro ID: b9bc0d08-5be2-4fdf-93cd-5618a8d53b35
This commit is contained in:
@@ -233,32 +233,7 @@ useEffect(() => {
|
||||
|
||||
## Performance Profiling
|
||||
|
||||
### React DevTools (Standalone)
|
||||
|
||||
For profiling React renders and inspecting component trees, use the standalone React DevTools app:
|
||||
|
||||
```bash
|
||||
# Install globally (once)
|
||||
npm install -g react-devtools
|
||||
|
||||
# Launch the standalone app
|
||||
npx react-devtools
|
||||
```
|
||||
|
||||
Then run `npm run dev` — the app auto-connects (connection script in `src/renderer/index.html`).
|
||||
|
||||
**Tabs:**
|
||||
- **Components** — Inspect React component tree, props, state, hooks
|
||||
- **Profiler** — Record and analyze render performance, identify unnecessary re-renders
|
||||
|
||||
**Profiler workflow:**
|
||||
1. Click the record button (blue circle)
|
||||
2. Interact with the app (navigate, type, scroll)
|
||||
3. Stop recording
|
||||
4. Analyze the flame graph for:
|
||||
- Components that render too often
|
||||
- Render times per component
|
||||
- Why a component rendered (props/state/hooks changed)
|
||||
For React DevTools profiling workflow, see [[CONTRIBUTING.md#profiling]].
|
||||
|
||||
### Chrome DevTools Performance Traces
|
||||
|
||||
|
||||
Reference in New Issue
Block a user