Como debugar um app que a IA escreveu e você não entende

O app funcionava. Você pediu mais um ajuste, a IA respondeu que estava tudo certo, e agora a tela está branca. Você pede para corrigir, ela conserta uma coisa e quebra outra. Na quarta tentativa o app está pior do que estava e você já gastou vinte créditos.

O problema quase nunca é o modelo. É que o pedido de correção não tem informação suficiente para ninguém consertar nada, humano ou máquina. Debugar código gerado por IA é menos sobre entender o código e mais sobre coletar evidência antes de pedir socorro.

Regra zero: reproduzir antes de pedir correção

Antes de escrever qualquer prompt, responda três coisas:

O que você fez, na ordem exata dos cliques. Qual era o resultado esperado. O que apareceu no lugar.

Se o erro só acontece às vezes, anote o que era diferente nas vezes em que aconteceu: outro usuário logado, campo vazio, primeiro acesso do dia, aba aberta há horas. Erro intermitente quase sempre é sessão expirada, dado nulo ou corrida entre duas requisições.

Onde olhar, por sintoma

Console e Network abrem com F12 no navegador, ou botão direito e Inspecionar. São as duas telas que resolvem oitenta por cento dos casos.

Lendo o console sem saber programar

O console mostra o erro e o caminho até ele. Você não precisa entender o código, precisa entender três padrões.

Cannot read properties of undefined (reading 'map') significa que o código esperava uma lista e recebeu nada. Costuma ser resposta do banco que voltou vazia ou com erro, e o código não tratou esse caso.

X is not a function significa que o código chamou algo que não existe com esse nome. Geralmente é importação errada ou nome trocado numa edição recente.

Failed to fetch ou NetworkError significa que a requisição nem chegou ao destino. Olhe URL, chave e CORS.

A primeira linha vermelha importa. As seguintes costumam ser consequência. Copie a primeira inteira, com o nome do arquivo e o número da linha que aparece à direita.

Lendo a aba Network

Clique na aba Network, refaça a ação e olhe a linha que aparece. O que interessa é a coluna de status e a aba Response.

Clique na requisição e abra Response. O Supabase devolve o motivo por escrito. Uma resposta como new row violates row-level security policy for table "projetos" diz exatamente o que corrigir, e nenhuma quantidade de tentativa e erro no prompt chega lá mais rápido.

Erros do Supabase que aparecem sempre

O quarto caso é o mais comum em app gerado por IA: o código e o banco desalinham depois de algumas iterações. Vale abrir o painel de tabelas e conferir o nome exato da coluna antes de qualquer coisa.

Isolar antes de corrigir

Quando o erro não é óbvio, reduza o espaço de busca em vez de pedir uma correção geral.

Volte para o último ponto que funcionava. No Lovable isso é o histórico de versões; em projeto com Git, um commit anterior. Confirme que naquele ponto está tudo certo. Agora você sabe que o problema está entre os dois pontos, e isso é metade do trabalho.

Refaça um passo de cada vez. Se foram três pedidos desde então, aplique um, teste, aplique o próximo. O pedido que quebra aparece sozinho.

Peça um log em vez de uma correção. Um console.log antes da linha suspeita mostrando o valor da variável responde mais que três rodadas de adivinhação.

O prompt de correção que funciona

Prompt ruim: "não está funcionando, arruma".

Prompt que resolve:

A tela de projetos está em branco depois que salvo um projeto novo.

Passos: faço login, clico em Novo Projeto, preencho o nome, clico em Salvar.
Esperado: voltar para a lista com o projeto novo.
Acontece: tela branca.

Console: Cannot read properties of undefined (reading 'map')
em ListaProjetos.tsx, linha 42.

Network: POST para /rest/v1/projetos retorna 201.
GET para /rest/v1/projetos retorna 200 com array vazio.

Já tentei: recarregar a página. Depois de recarregar, o projeto aparece.

Não mexa em outros arquivos. Explique a causa antes de alterar o código.

Quatro coisas fazem esse prompt funcionar: o erro literal copiado, o comportamento observado na rede, o que você já testou e o limite de escopo. As duas últimas frases evitam que a correção espalhe mudança por arquivos que estavam bons.

Peça a causa antes da correção. Se a explicação não faz sentido nem para você, provavelmente a correção também não faz.

Quando parar de pedir e olhar o código

Depois de duas tentativas sem progresso, abra o arquivo citado no erro e leia as linhas em volta da linha indicada. Você não precisa entender tudo, só precisa achar o nome da variável ou da coluna e conferir se bate com o banco.

Boa parte dos erros de app gerado por IA é desalinhamento de nome: a tela busca criado_em, a tabela tem created_at. Isso é achável sem saber programar.

Prevenção que economiza crédito

Debugar é um ciclo curto: reproduzir, observar, isolar, corrigir, confirmar. A IA é ótima na etapa de corrigir e péssima nas outras três, porque ela não vê a sua tela nem o seu console. Quem faz esse trabalho é você, e é por isso que a evidência coletada antes do prompt vale mais que o modelo escolhido.