Act as a senior engineer doing root-cause analysis. Here is the error and full stack trace: [paste error]. Here is the relevant code and the surrounding context: [paste code]. Do NOT jump straight to a fix. First, restate what the error actually means at the language/runtime level and identify the exact line and the specific value that triggered it. Then enumerate the plausible causes ranked by likelihood, and for each give me a concrete, cheap way to confirm or rule it out — a specific log line, a breakpoint and the value to inspect, or a minimal repro. Once the evidence points to one cause, propose the SMALLEST correct fix, explain why it addresses the root cause rather than masking the symptom, and call out any other places in the codebase likely to carry the same latent bug. Finally, tell me what test or assertion would have caught this and would prevent a regression. If the information I gave is insufficient to be sure, tell me exactly what to capture next instead of guessing. I want the reasoning and the verification steps, not just a patched snippet.
#23Debugging
Performance Profiling Guide
My web app is slow — it takes over 4 seconds to become interactive. Act as a performance engineer and build a MEASUREMENT-FIRST plan; do not suggest fixes before we have data. Walk me through capturing a trace (Chrome DevTools Performance panel and a Lighthouse run), how to read the flame chart to separate main-thread long tasks from network and rendering time, and how to map what I see onto the Core Web Vitals (LCP, INP, CLS). For each common culprit — heavy or duplicated JavaScript, render-blocking resources, layout thrashing, oversized/unsized images, excessive DOM nodes, unbatched re-renders — tell me the signature it leaves in the trace and the targeted fix for it. Then give me a prioritized list ordered by expected impact versus effort: code splitting, lazy loading, correctly sized and modern-format images, font-display strategy, caching and compression headers, and memoization. Insist that I measure before and after each change so we can actually attribute the win. Done when I can point to the specific bottleneck in my own trace, apply the matching fix, and show the relevant metric improved — not just run down a generic checklist.
#24Debugging
Memory Leak Detective
Help me find and fix a memory leak in my JavaScript/TypeScript app — memory grows steadily over time and never recovers. Work EMPIRICALLY. Walk me through taking heap snapshots and using the allocation timeline, how to compare two snapshots to find objects that should have been collected but were retained, and how to read a retainer chain back to the exact reference pinning them. Then map that evidence onto the usual root causes — detached DOM nodes, event listeners or subscriptions never removed, intervals/timeouts not cleared, closures capturing large scopes, caches or Maps that only ever grow, and in React stale closures or missing cleanup in useEffect — and for each, show me the pattern that causes it and the corrected pattern that prevents it. Hammer on the principle: every subscription, listener, observer, and timer needs a matching teardown. Done when I can identify the specific retained object and its retainer chain in MY snapshot, apply the matching cleanup, and confirm memory returns to baseline after I repeat the suspect interaction several times — proving the leak is actually closed, not just smaller.
#25Debugging
CSS Layout Debugger
My CSS layout is broken: [describe the issue — e.g., an element overflowing its container, won't center, grid columns misaligned, z-index ignored]. Here is the markup and the styles: [paste code]. Debug it METHODICALLY, not by trial and error. First explain the box-model and formatting-context concepts that actually govern this case — content-box vs border-box, margin collapsing, block vs flex vs grid formatting contexts, and how stacking contexts are created and why a z-index can be trapped inside one. Then show me exactly what to inspect in DevTools (computed styles, the box-model diagram, and the flex/grid overlays) to find where the real width/height/offset diverges from what I expect. Give me corrected CSS with a comment on each change naming the cause it addresses, and explicitly flag any fix that only works by coincidence — magic numbers — versus one that's robust to changing content and viewport. Done when the layout holds from 320px to wide desktop with no overflow, and I understand WHICH property was the actual cause, not merely that the symptom disappeared.
#26Debugging
Race Condition Finder
I think my app has a race condition: [describe the symptom — stale values, updates landing out of order, intermittent failures that vanish the moment I add logging]. Help me reason about it PRECISELY. Explain how races arise in async JavaScript even without threads: overlapping fetches resolving out of order, state updates computed from a stale closure, effects firing before a prior async operation settles, and shared mutable state mutated from concurrent handlers. Then help me pin down the exact interleaving that produces my symptom by reasoning about which async operations can overlap and what ordering breaks the invariant. Give me concrete fixes matched to the cause: cancel stale work with AbortController, ignore out-of-order responses by tagging and checking the latest request id, serialize with a mutex or queue, use functional state updates instead of read-then-write, debounce rapid triggers, and apply optimistic locking/versioning for server state. Done when we have NAMED the specific interleaving that triggers the bug, chosen the fix that closes that exact window (not one that merely makes it rarer), and identified a way to reproduce it deterministically so we can confirm the fix.
#27Debugging
API Integration Troubleshooter
My API integration is failing: [describe the API, the exact request I send, the response or error I get, and what I expected]. Debug it SYSTEMATICALLY and isolate which side is at fault before changing any code. Walk me through inspecting the real request in the Network tab — method, full URL, every header, the body, and the actual response status and payload — then reproducing it OUTSIDE my app with curl or Postman so we know whether the bug is in my client or on the server. Compare my request against the API docs field by field. Cover the usual suspects with their tells: CORS and the preflight (OPTIONS) handshake, auth header format and token expiry, Content-Type vs the body I'm actually sending, URL-encoding and trailing-slash issues, pagination and rate-limit responses, and API versioning. If it's CORS, explain why it is browser-enforced and fixed on the server, and show both the correct server headers and the client-side change. Done when we have PROVEN whether the failure is client- or server-side using an out-of-app reproduction, identified the specific mismatch, and applied the fix on the correct side.