| name | Debug weird UI behavior with CDP logging |
| description | Use when weird app/UI behavior needs live reproduction and tracing, including flicker, stale state, remounts, focus/scroll jumps, action glitches, or ordering flashes |
Debug weird UI behavior with CDP logging
Use this when the app does something weird and the behavior must be observed live: refreshes, remounts, flickers, rows briefly unfolding, wrong ordering for a moment, state changing then reverting, actions firing twice, stale UI, unexpected navigation, focus loss, scroll jumps, or anything where code inspection alone is likely to lie.
Rules
- Reproduce in the running dev app. Do not guess from code only.
- Use CDP against Electron (
CDP_PORT=39217) when possible.
- Instrument the page with a small in-page logger before performing the action.
- Only act on disposable data.
- Create temp branches/worktrees/projects/sessions when needed.
- Use obvious names like
cdp-debug-* or tmp-*.
- Delete/clean them up after the test.
- Do not use important branches, real user sessions, or serious project data for destructive actions.
- If a destructive action is required, make the temporary object first, verify it appears, then delete that object only.
CDP setup
List targets:
CDP_PORT=39217 node /home/igorw/.pi/agent/codex-conversion-custom-tools/browser/cdp.mjs list
Use the target id prefix from list in later commands.
Install a DOM mutation logger
Adapt selectors to the surface being debugged. For sidebar branch/worktree flicker, this logger captures row labels, expanded state, and scroll position:
CDP_PORT=39217 node /home/igorw/.pi/agent/codex-conversion-custom-tools/browser/cdp.mjs eval <target>
