Frontend Debugging Process Guide

Problem Analysis

I’m facing a frontend issue with the following details:

Issue: [Brief description of the problem]

Error Message:

[Exact error message if available]

Expected Behavior: [What should happen]

Actual Behavior: [What’s actually happening]

Environment:

  • Browser: [Browser name and version]
  • OS: [Operating system]
  • Framework/Library: [React/Vue/Angular/etc. and version]

Code Context:

[Relevant code snippets]

Recent Changes: [Any recent changes that might be related]

Troubleshooting Steps Tried: [What I’ve already attempted]

Analysis Request

Please help me debug this issue by:

  1. Considering 5-7 possible sources of the problem
  2. Narrowing down to the 1-2 most likely causes
  3. Suggesting specific logging statements or debugging techniques to validate these assumptions
  4. Providing a systematic approach to fix the issue once validated

Additional Context

[Include any other relevant information such as:]

Application Architecture: [Overview of application architecture, key dependencies, or specific technical constraints]

Visual Evidence: I’ve attached screenshots showing:

  1. The expected behavior with no console errors after component unmount
  2. The actual behavior showing continuous console messages after unmount
  3. The React warning in the Console tab of Chrome DevTools

[Note: Attach relevant screenshots or recordings when submitting this prompt]

Performance Metrics (if performance-related):

  • Load time: [e.g., “3.5 seconds on average”]
  • Memory usage: [e.g., “Memory grows to 500MB after 5 minutes of use”]
  • Network activity: [e.g., “Multiple redundant API calls occurring”]
  • Rendering metrics: [e.g., “Component re-renders 20+ times when value changes”]

State Management: [Description of state flow, global state structure, or specific state management libraries in use]

Browser/Device Specific: [Any browser or device-specific information if the issue only occurs in certain environments]