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
Outros prompts de Frontend
ChatGPT
Melhores práticas de performance e otimização para Frontend
Prompt gerado automaticamente para Performance e otimização em Frontend
4 usos
ChatGPT
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
6 usos
ChatGPT
Melhores práticas de componentização e reutilização para Frontend
Prompt gerado automaticamente para Componentização e reutilização em Frontend
1 usos