Instructs Cursor to add debug logs, use browser tools for bug-fixing, remove logs after resolution, and make minimal changes.

debugging-process.mdc

---
description:
globs:
alwaysApply: true
---
# Debugging Rule for Bug-Fixing Requests

This rule ensures that when a user request involves solving a bug, Cursor adds minimal debug logs, leverages browser-based debugging tools, removes logs after resolution, and makes only the minimal changes necessary.

## Rule Instructions

1. **Identify Bug-Fixing Requests**:
   - MUST check for keywords like "bug," "fix," "issue," "error," "debug," or "problem."
   - Example prompts: "Fix the login button crash," "Debug the API call failure," "Resolve the null pointer issue."

2. **Add Minimal Debug Logs**:
   - MUST insert minimal console logs or debugging statements (e.g., `console.log`, `debugger`) only at critical points, such as:
     - Function entry/exit points directly related to the bug.
     - Key variable assignments tied to the issue.
     - Suspected error-prone areas (e.g., API calls, DOM manipulations).
   - Use concise, descriptive log messages, e.g., `console.log('LoginButton: userId:', userId)`.
   - Avoid excessive or redundant logs to minimize code changes.

3. **Use Browser Debugging Tools**:
   - MUST simulate browser-based debugging:
     - Open browser developer tools (e.g., Chrome DevTools).
     - Check console for errors or logs.
     - Inspect network requests for failed API calls.
     - Use breakpoints or watch expressions for dynamic analysis.
   - For UI bugs, inspect only relevant DOM elements and CSS styles.

4. **Resolve the Bug with Minimal Changes**:
   - MUST analyze logs and browser tool outputs to pinpoint the root cause.
   - Apply the smallest possible code changes to fix the bug.
   - Test the fix in the browser to confirm resolution.

5. **Remove Debug Logs**:
   - After confirming the bug is fixed, MUST remove all added debug logs and statements.
   - Ensure no residual debugging code remains in the codebase.

## Example Workflow
For a prompt like "Fix the login button crash":
- Add `console.log('LoginButton: state:', state)` in the button’s event handler.
- Open browser, check console for errors.
- Identify the issue (e.g., missing user authentication token).
- Fix with minimal change (e.g., add token validation).
- Remove the `console.log` statement after verification.

## Constraints
- Make only the minimal code changes necessary to resolve the bug.
- Avoid modifying unrelated code sections.
- Ensure browser-based debugging is relevant (e.g., skip for backend-only bugs).