---
description: Debugging Guidelines
globs: *.tsx, *.ts, *.js
alwaysApply: false
---

# Debugging Guidelines

- Always add temporal and friendly `console.debug` statements for logging new props or events.
- Set visual boundaries to easily spot the start and end of debugging sections.
- Remove debugging code before committing to production.

## Example:
```tsx
export const UserProfile = ({ user, onUpdate }: UserProfileProps) => {
  console.debug('=== UserProfile Component Start ===');
  console.debug('Props received:', { user, onUpdate });
  
  const handleSubmit = (formData: FormData) => {
    console.debug('Form submitted with data:', formData);
    onUpdate(formData);
  };
  
  console.debug('Rendering UserProfile component...');
  
  // Component rendering logic
  
  console.debug('=== UserProfile Component End ===');
  return (
    // JSX
  );
};
```