Testing & Debugging

The debugging mindset

When something breaks, stay calm. Debugging is detective work. You gather clues, form hypotheses, and test them.

AI is excellent at debugging because it can analyze error messages, trace code paths, and suggest fixes. But you need to give it good information.

Using browser DevTools

Your browser has powerful debugging tools. Learn these basics:

• Console tab: Shows JavaScript errors and console.log output
• Network tab: Shows API requests and responses
• Elements tab: Inspect HTML and CSS
• React DevTools: Extension for inspecting React components

Open DevTools with F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows).

Debugging with AI

When you hit an error, give AI all the context it needs:

I am getting this error when I try to save a new task:

Error: insert into "tasks" (...) - violates row-level security policy

Here is my code:
[paste the relevant code]

Here is my Supabase RLS policy:
[paste the policy]

The user is logged in (I verified auth.user exists).
What am I missing?

Common issues and fixes

CORS errors

These happen when your frontend tries to call an API on a different domain. Solutions:

• Use Next.js API routes as a proxy
• Configure CORS on your backend
• Ask AI: "How do I fix CORS error when calling [API] from Next.js?"

Hydration errors

React hydration errors occur when server and client render different content. Common causes:

• Using browser-only APIs (window, localStorage) during server render
• Date/time formatting differences
• Random values

Environment variables not working

• Client-side variables must start with NEXT_PUBLIC_
• Restart the dev server after changing .env files
• Check for typos in variable names

Writing tests

Tests catch bugs before users do. For an MVP, focus on testing critical paths:

• User can sign up and log in
• User can create, update, delete core data
• Protected pages redirect unauthenticated users

Write tests for my TaskList component using React Testing Library.

Test these scenarios:
1. Shows loading spinner while fetching
2. Displays tasks when loaded
3. Shows empty state when no tasks
4. Calls the API when checkbox is clicked

Here is my component:
[paste component code]

Manual testing checklist

Before deploying, test these manually: