Prompts for diagnosing bugs, fixing errors, profiling performance, and improving code quality.
I'm getting the following error: [paste error]. Here is the relevant code: [paste code]. Walk me through diagnosing this step by step. Explain what the error means, identify the most likely cause, suggest a fix, and explain why the fix works. If there are multiple possible causes, rank them by likelihood and show how to verify which one is the actual issue.
My web application is slow. The page takes over 4 seconds to become interactive. Help me create a performance profiling plan. Walk me through: how to use Chrome DevTools Performance tab to identify bottlenecks, how to read a flame chart, common causes of long tasks (heavy JavaScript, layout thrashing, excessive DOM nodes, unoptimized images), and specific fixes for each. Include a checklist of quick wins: lazy loading, code splitting, image optimization, font loading strategy, and caching headers.
Help me find and fix a memory leak in my JavaScript application. The app's memory usage grows continuously over time. Walk me through: how to use Chrome DevTools Memory tab to take heap snapshots, how to compare snapshots to find retained objects, common causes of memory leaks in web apps (detached DOM nodes, forgotten event listeners, closures holding references, intervals not cleared, growing arrays/maps), and how to fix each type. Show me code patterns that prevent memory leaks.
My CSS layout is broken. [Describe the issue — e.g., elements overflowing, not centering, grid not aligning, z-index not working]. Help me debug this systematically. Explain the CSS box model concepts relevant to the issue, show me how to use browser DevTools to inspect computed styles and the layout grid/flexbox overlays, identify the most common CSS layout mistakes (missing display property, percentage heights without parent height, margin collapse, stacking context), and provide the corrected CSS with comments explaining each fix.
I suspect my application has a race condition. [Describe the symptom — e.g., data shows stale values, operations happen out of order, intermittent failures]. Help me identify and fix it. Explain what race conditions are in the context of JavaScript (async operations, state updates, API calls), show me common patterns that cause them (multiple concurrent fetches updating the same state, click handlers firing before previous operation completes, shared mutable state), and provide solutions: request cancellation with AbortController, mutex/semaphore patterns, optimistic locking, and debouncing.
My API integration is failing. [Describe: which API, the error response, what you expected]. Help me debug this systematically. Walk through: checking the request with DevTools Network tab (method, headers, body, URL), comparing against the API documentation, common issues (CORS errors, authentication header format, content-type mismatch, URL encoding, rate limits, API versioning), and how to use curl or Postman to isolate whether the issue is in my code or the API. If it's a CORS issue, explain the preflight process and show both frontend and backend fixes.