Run any Skill in Manus with one click

electron-profile

Stars9,233

Forks1,290

UpdatedJuly 10, 2026 at 12:12

Use when analyzing a Chrome/Electron DevTools Performance trace export (.json) — slow renders, long tasks, jank, CPU sample attribution, "where is the time actually going".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

keybase

keybase/client

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

4 files

SKILL.md

readonly

name	electron-profile
description	Use when analyzing a Chrome/Electron DevTools Performance trace export (.json) — slow renders, long tasks, jank, CPU sample attribution, "where is the time actually going".

DevTools Performance Trace Analysis

Parse DevTools Performance panel exports with Python scripts in scripts/ — no DevTools UI needed. A trace is one big JSON of traceEvents; a 400MB export loads in ~30s. The embedded sampling profile lives in Profile/ProfileChunk events.

Workflow

Overview — processes, busiest renderer main thread, long tasks (with time offsets), X-event category totals:
```
python3 scripts/trace-overview.py <trace.json> [--long-ms 50] [--top 30]
```
Sample attribution — self time, inclusive time, and nearest-app-frame attribution from the CPU sampling profile. Use --window (seconds, relative to first sample) to zoom into a long task found in step 1:
```
python3 scripts/trace-samples.py <trace.json> [--window FROM_S TO_S] [--top 30]
```

Both auto-pick the busiest CrRendererMain; override with --pid/--tid. Both need scripts/tracelib.py alongside.

Interpreting results (dev builds especially)

Dev-build traces are ~85-90% React dev instrumentation, NOT app code. Absolute numbers are meaningless; prod is ~10x faster. For real numbers profile the prod bundle (see prod-bundles skill), or at minimum disable the React DevTools extension while recording.

Signal	Meaning
Huge `run (:-1)` self time, `createTask`, `measure`	React 19 dev component-performance tracks: `console.createTask().run()` inside `runWithFiberInDEV`/`logComponentRender`. Not app code.
`v8::Debugger::AsyncTaskRun` dominating X-event totals	Debugger async-stack tracking (DevTools open). Dev artifact.
Effects firing twice back-to-back	StrictMode double-invoke. Dev only.
90%+ samples with no app frame on stack	Expected in dev — instrumentation + framework internals. Judge the app-frame report's relative ranking, not totals.
`performSyncWorkOnRoot` ≫ scheduler time in inclusive report	Most renders are sync (flushSync / discrete events), not concurrent. Structural signal — valid even in dev.
`pptr:internal` frames	CDP automation harness driving the app, not app code (excluded from app-frame report).
Layout / Paint / GC / EventDispatch totals in overview	Real browser work — valid signal even in dev. Compare against script time.

Judge structure, not magnitude in dev traces: sync-vs-concurrent split, Layout/Paint/GC share, which app components rank highest, burst patterns around long tasks.

Gotchas

X-event name totals are nested-inclusive (parent contains child) — relative shape only, don't sum.
Sample span < trace span is normal: sampling only covers the profiled window.
App-frame attribution skips frames whose URL contains node_modules — with Vite dev this automatically excludes React (node_modules/.vite/deps/...).
--window is relative to the first sample, not trace start; long-task t= offsets from the overview are relative to trace start. They usually differ by <1s but eyeball the sample span line.
Trace timestamps are microseconds.

More from this repository

same repository

update-dependencies

keybase/client

Use when updating npm/yarn dependencies in shared/package.json, protocol/, or rnmodules/react-native-kb/. Use for routine dep bumps, security updates, or keeping packages current.

2026-07-179.2k

react-devtools-profile

keybase/client

Use when analyzing a React DevTools Profiler export (.json with "dataForRoots"/"commitData") — re-render storms, commit fan-out, "why did this component render", send/interaction render cost. NOT for Chrome Performance traces (those have "traceEvents" — use electron-profile).

2026-07-139.2k

electron-heap

keybase/client

Use when analyzing a V8/Chrome/Electron .heapsnapshot file — memory leak hunting, detached DOM nodes, "why is this object retained", growing heap, retainer paths.

2026-07-109.2k

address-pr-feedback

keybase/client

Use when asked to look at or address feedback on a PR. Fetches Copilot-only inline comments, skips hidden ones, then evaluates and fixes the valid ones.

2026-07-089.2k

keybase-e2e-tests

keybase/client

Use when writing, fixing, or adding e2e flow tests for the Keybase app — desktop (Playwright) or iOS (Maestro). Covers testID conventions, navigation patterns, common pitfalls, and the two-harness structure.

2026-06-109.2k

bumping-versions

keybase/client

Use when upgrading the Keybase client version number - lists all files that must be updated together

2026-06-089.2k

name	electron-profile
description	Use when analyzing a Chrome/Electron DevTools Performance trace export (.json) — slow renders, long tasks, jank, CPU sample attribution, "where is the time actually going".

DevTools Performance Trace Analysis

Workflow

Overview — processes, busiest renderer main thread, long tasks (with time offsets), X-event category totals:
```
python3 scripts/trace-overview.py <trace.json> [--long-ms 50] [--top 30]
```
Sample attribution — self time, inclusive time, and nearest-app-frame attribution from the CPU sampling profile. Use --window (seconds, relative to first sample) to zoom into a long task found in step 1:
```
python3 scripts/trace-samples.py <trace.json> [--window FROM_S TO_S] [--top 30]
```

Both auto-pick the busiest CrRendererMain; override with --pid/--tid. Both need scripts/tracelib.py alongside.

Interpreting results (dev builds especially)

Signal	Meaning
Huge `run (:-1)` self time, `createTask`, `measure`	React 19 dev component-performance tracks: `console.createTask().run()` inside `runWithFiberInDEV`/`logComponentRender`. Not app code.
`v8::Debugger::AsyncTaskRun` dominating X-event totals	Debugger async-stack tracking (DevTools open). Dev artifact.
Effects firing twice back-to-back	StrictMode double-invoke. Dev only.
90%+ samples with no app frame on stack	Expected in dev — instrumentation + framework internals. Judge the app-frame report's relative ranking, not totals.
`performSyncWorkOnRoot` ≫ scheduler time in inclusive report	Most renders are sync (flushSync / discrete events), not concurrent. Structural signal — valid even in dev.
`pptr:internal` frames	CDP automation harness driving the app, not app code (excluded from app-frame report).
Layout / Paint / GC / EventDispatch totals in overview	Real browser work — valid signal even in dev. Compare against script time.

Judge structure, not magnitude in dev traces: sync-vs-concurrent split, Layout/Paint/GC share, which app components rank highest, burst patterns around long tasks.

Gotchas

X-event name totals are nested-inclusive (parent contains child) — relative shape only, don't sum.
Sample span < trace span is normal: sampling only covers the profiled window.
App-frame attribution skips frames whose URL contains node_modules — with Vite dev this automatically excludes React (node_modules/.vite/deps/...).
--window is relative to the first sample, not trace start; long-task t= offsets from the overview are relative to trace start. They usually differ by <1s but eyeball the sample span line.
Trace timestamps are microseconds.