firebase-development-debug

What this skill does

# Firebase Debugging

## Overview

This sub-skill guides systematic troubleshooting of Firebase development issues. It handles emulator problems, rules violations, function errors, auth issues, and deployment failures.

**Key principles:**
- Identify issue type first (emulator, rules, functions, auth, deployment)
- Use Emulator UI and Rules Playground for diagnosis
- Export emulator state before restarting
- Document issues and solutions for future reference

## When This Sub-Skill Applies

- Emulators won't start or have port conflicts
- Getting Firestore rules violations (PERMISSION_DENIED)
- Cloud Functions returning errors or not executing
- Authentication not working in emulators
- Deployment fails with cryptic errors
- User says: "debug", "troubleshoot", "error", "not working", "failing"

**Do not use for:**
- Setting up new projects → `firebase-development:project-setup`
- Adding new features → `firebase-development:add-feature`
- Code review without specific errors → `firebase-development:validate`

## TodoWrite Workflow

Create checklist with these 10 steps:

### Step 1: Identify Issue Type

Categorize the error:

| Category | Symptoms | Keywords |
|----------|----------|----------|
| Emulator Won't Start | Port conflicts, initialization errors | "EADDRINUSE", "emulator failed" |
| Rules Violation | Permission denied on read/write | "PERMISSION_DENIED", "insufficient" |
| Function Error | HTTP 500, timeout, not executing | "function failed", "timeout" |
| Auth Issue | Token errors, not authenticated | "auth failed", "invalid token" |
| Deployment Failure | Deploy command fails | "deployment failed", "deploy error" |

**If unclear, use AskUserQuestion** to clarify issue type.

### Step 2: Check Emulator Logs and Terminal

**For running emulators:** Watch terminal output while reproducing the issue.

**For emulators that won't start:**
```bash
lsof -i :4000 && lsof -i :5001 && lsof -i :8080  # Check ports
kill -9 <PID>  # Kill conflicting process
```

**For deployment errors:** Check `firebase-debug.log`

**Reference:** `docs/examples/emulator-workflow.md`

### Step 3: Open Emulator UI

```bash
open http://127.0.0.1:4000
```

Use Emulator UI to:
- View Firestore data and structure
- Check authenticated users
- Review function invocation logs
- Search consolidated logs

### Step 4: Test Rules in Playground (If Rules Issue)

In Emulator UI → Firestore → Rules Playground:
1. Select operation type (get/list/create/update/delete)
2. Specify document path
3. Set auth context (uid, custom claims)
4. Add request data for writes
5. Run simulation and review evaluation trace

**Reference:** `docs/examples/firestore-rules-patterns.md`

### Step 5: Add Debug Logging (If Function Error)

Add strategic console.log statements:
- Function entry confirmation
- Input data (req.body, req.params)
- Auth context (userId, API key)
- Intermediate operation results
- Error details with stack trace

Watch terminal output while reproducing.

**Reference:** `docs/examples/express-function-architecture.md`

### Step 6: Verify Auth Configuration (If Auth Issue)

Check environment variables:
```bash
cat functions/.env
cat hosting/.env.local  # Should have NEXT_PUBLIC_USE_EMULATORS=true
```

Check emulator connection in client code and API key middleware.

**Reference:** `docs/examples/api-key-authentication.md`

### Step 7: Check Deployment Config (If Deployment Failure)

```bash
cat firebase-debug.log  # Full error details
cat firebase.json       # Config issues
cat .firebaserc         # Project ID
firebase target:list    # Verify targets
```

Test predeploy hooks locally:
```bash
cd functions && npm run build
```

### Step 8: Export Emulator State

Before making fixes:
```bash
# Graceful shutdown (Ctrl+C exports automatically)
# Or manual export:
firebase emulators:export ./backup-data
```

Verify export: `ls -la .firebase/emulator-data/`

### Step 9: Implement and Test Fix

Apply fix based on diagnosis, then:
```bash
firebase emulators:start --import=.firebase/emulator-data
```

Verify:
- Original error no longer occurs
- Terminal shows success logs
- Emulator UI confirms expected behavior

### Step 10: Document Issue and Solution

Create entry in `docs/debugging-notes.md`:
- Symptom and exact error message
- Root cause
- Solution applied
- Prevention for future

## Common Issues Quick Reference

| Issue | Solution |
|-------|----------|
| Port conflicts | `lsof -i :<port>`, kill process |
| Data persistence lost | Use Ctrl+C (not kill) to stop emulators |
| Cold start delays | First call takes 5-10s (normal) |
| Rules not reloading | Restart emulators |
| Admin vs Client SDK | Admin bypasses rules, client respects them |
| Missing CORS | Add `app.use(cors({ origin: true }))` |
| Emulator connection | Set `NEXT_PUBLIC_USE_EMULATORS=true` |
| API key prefix | Verify prefix matches actual keys |

## Integration with Superpowers

If Firebase-specific tools don't reveal root cause, invoke `superpowers:systematic-debugging` for:
- Complex multi-service interactions
- Race conditions or timing issues
- Call stack tracing beyond Firebase layer

## Pattern References

- **Emulator workflow:** `docs/examples/emulator-workflow.md`
- **Rules patterns:** `docs/examples/firestore-rules-patterns.md`
- **Auth patterns:** `docs/examples/api-key-authentication.md`
- **Functions:** `docs/examples/express-function-architecture.md`