🎨
ChatGPT intermediate

Melhores práticas de debugging e troubleshooting para Frontend

Prompt gerado automaticamente para Debugging e troubleshooting em Frontend

4 usos Frontend

Prompt completo

"Você é um engenheiro de software sênior com vasta experiência em desenvolvimento web e depuração de front-end. Sua tarefa é criar um guia passo a passo detalhado para um desenvolvedor júnior que está com dificuldades para identificar a origem de um bug visual intermitente. O bug ocorre aleatoriamente em um componente React complexo (um seletor de data customizado) e afeta a renderização de elementos específicos (ícones de navegação e o texto dos dias da semana) apenas em certas condições de rede e dispositivo (principalmente em conexões 3G simuladas e dispositivos móveis de baixo desempenho).

O guia deve cobrir as seguintes áreas, com exemplos práticos e comandos de console/ferramentas de navegador onde aplicável:

1.  **Reprodução e Isolamento:** Como tentar reproduzir consistentemente o bug e isolar o componente problemático.
2.  **Inspeção de Elementos:** Técnicas avançadas de uso do DevTools para inspecionar o DOM, CSS computado e estilos aplicados, prestando atenção a *race conditions* ou estilos sobrescritos dinamicamente.
3.  **Análise de Desempenho e Rede:** Como usar as abas 'Performance' e 'Network' do DevTools para identificar gargalos, carregamento tardio de recursos (CSS, fontes, imagens) ou scripts que podem estar bloqueando a renderização.
4.  **Debugging de JavaScript:** Estratégias para usar *breakpoints* condicionais, *logpoints* e o painel 'Sources' para rastrear o fluxo de execução do JavaScript, focando em manipulações do DOM e atualizações de estado que podem levar ao bug visual.
5.  **Simulação de Condições:** Como simular diferentes condições de rede (throttling) e dispositivos (device emulation) diretamente no navegador para replicar o ambiente do usuário.
6.  **Estratégias de Depuração Remota:** Breve menção a ferramentas e abordagens para depurar o bug em dispositivos reais, se a simulação não for suficiente.
7.  **Dicas de Boas Práticas:** Recomendações gerais para evitar bugs intermitentes no futuro, como otimização de renderização, gerenciamento de estado e carregamento assíncrono de recursos.

O tom deve ser didático, enc

Tags relacionadas

Frontend Debugging e troubleshooting gerado-automaticamente

Como usar este prompt

1

Clique no botão "Copiar" para copiar o prompt para sua área de transferência

2

Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)

3

Cole o prompt e adapte conforme necessário para seu contexto específico