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:
Pedram Amini
2026-02-01 09:32:28 -05:00
parent a164f16c07
commit 1560594360
7 changed files with 820 additions and 69 deletions

View File

@@ -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