Dicas de debugging e troubleshooting para Frontend

Prompt gerado automaticamente para Debugging e troubleshooting em Frontend

5.0
32 usos
ChatGPT
Usar no ChatGPT
"Você é um engenheiro de software sênior com vasta experiência em desenvolvimento web e depuração de aplicações Frontend. Seu time está enfrentando um problema intermitente e difícil de reproduzir em produção: alguns usuários relatam que, ao interagir com um formulário complexo em uma aplicação React, o formulário 'trava' ou exibe dados incorretos após o envio, mas isso não acontece consistentemente para todos.

A aplicação utiliza React Hooks (useState, useEffect, useCallback), Context API para gerenciamento de estado global e Redux-Saga para efeitos colaterais assíncronos (envio do formulário para uma API REST). O backend é um serviço Node.js com Express.

Seu objetivo é criar um guia detalhado e prático para o time de desenvolvimento, abordando as etapas de depuração, as ferramentas a serem utilizadas e as possíveis causas desse tipo de comportamento intermitente. O guia deve focar em técnicas de 'debugging e troubleshooting' específicas para o Frontend, considerando o stack tecnológico mencionado.

O guia deve incluir:

1.  **Estratégias de Reprodução:** Como tentar reproduzir o erro de forma mais consistente (ex: diferentes navegadores, dispositivos, velocidades de rede, sequência de cliques, dados de entrada).
2.  **Ferramentas de Depuração do Navegador:** Quais abas e recursos do Chrome DevTools (ou equivalentes) seriam mais úteis para investigar (ex: Network, Console, Components/Profiler, Performance, Application/Storage). Detalhe como usar cada uma para este cenário.
3.  **Depuração de Estado e Ciclo de Vida:** Como inspecionar o estado dos componentes React (useState, Context API) e o fluxo de dados através do Redux-Saga durante o problema.
4.  **Monitoramento de Rede:** Como analisar as requisições e respostas da API para identificar possíveis falhas de comunicação ou inconsistências de dados.
5.  **Análise de Logs:** Que tipo de logs Frontend seriam úteis (ex: console.log estratégico, bibliotecas de logging) e onde eles deveriam ser inseridos para capturar informações relevantes.
6.  **Possíveis Causas Comuns:** Uma lista de hipóteses para o problema intermitente (ex: race conditions, efeitos colaterais não limpos, erros de tipagem, problemas de cache,

Como Usar este Prompt

1

Clique no botão "Copiar Prompt" para copiar o conteúdo completo.

2

Abra sua ferramenta de IA de preferência (ChatGPT e etc.).

3

Cole o prompt e substitua as variáveis (se houver) com suas informações.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

Outros prompts de Frontend

Continue explorando prompts nesta categoria.

Melhores práticas de performance e otimização para Frontend

Prompt gerado automaticamente para Performance e otimização em Frontend

Melhores práticas de debugging e troubleshooting para Frontend

Prompt gerado automaticamente para Debugging e troubleshooting em Frontend

Melhores práticas de debugging e troubleshooting para Frontend

Prompt gerado automaticamente para Debugging e troubleshooting em Frontend