Debugging Skill

Instructions

1. Check browser console & Network tab
2. Review server logs in terminal
3. Verify environment variables
4. Check Firebase console for auth/db issues
5. Clear cache if needed: rm -rf .next && pnpm dev

Common Error Patterns

401 "인증이 필요합니다"

const { user, isAuthenticated } = useAuth()
console.log('Auth state:', { user, isAuthenticated })

Fix: Wrap with useRequireAuth(), check Firebase config

403 "권한이 없습니다"

console.log('authorId:', doc.data()?.authorId)
console.log('user:', authUser.uid)

Fix: Verify ownership check logic

404 "찾을 수 없습니다"

const doc = await db.collection('projects').doc(id).get()
console.log('exists:', doc.exists, 'id:', id)

Hydration Errors

const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null

Quick Checklist

• Browser console errors
• Network tab failed requests
• Environment variables set
• Firebase console status
• TypeScript errors (pnpm build)
• Server logs in terminal

For complete debugging templates and TypeScript error fixes, see reference.md.