Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Debug de um componente, ou ate componente que chama outro componente

Não sei se estou me adiantando com esta questão, gostaria de saber se existe uma forma comum no mercado de debug de projetos react, tenho baixado alguns projetos react que possui componentes gigantes, no caso de uma manutenção para analisar um possivel bug, muitas vezes o debug ajuda, os devs react utilizam de alguma estrategia para debug diferente de ficar colocando console.log ou debug via inspect no browser?

2 respostas
solução!

Oi, Alexandre! Como vai?

Sim, sua dúvida faz todo sentido e não está se adiantando, não. No mercado, é bem comum usar estratégias de debug que vão além de console.log.

Veja algumas práticas mais utilizadas no dia a dia com React:


// Exemplo com React Developer Tools
import { useEffect } from 'react';

function ComponenteExemplo() {
  useEffect(() => {
    debugger; // Interrompe a execução no DevTools
  }, []);

  return 
Componente carregado
; }

O debugger pausa a execução no DevTools do navegador (como o Chrome), assim que o componente for montado.

Outras estratégias comuns:

  • React Developer Tools (extensão do navegador)
  • Breakpoints direto no DevTools (sem precisar alterar o código)
  • Ferramentas como VSCode + Chrome Debugger Extension para debug direto do editor
  • Uso de logs estruturados com console.table() ou libs como why-did-you-render

// Exemplo usando console.table()
const colaboradores = [
  { nome: 'Ana', cargo: 'Dev' },
  { nome: 'João', cargo: 'Design' }
];

console.table(colaboradores);

Esse formato de log é muito mais legível que vários console.log soltos.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

  Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Obrigado Rafaela