O que são as ferramentas de desenvolvimento do Chrome (Chrome DevTools)?

O Chrome DevTools é um conjunto de ferramentas integradas no navegador para desenvolvimento e depuração web.

Principais painéis:

• Elements: Visualização e refatoração em tempo real da estrutura HTML e estilos CSS.
• Console: Saída de logs, execução de código JavaScript, depuração.
• Sources: Depuração de código JavaScript com pontos de interrupção, perfilagem de desempenho.
• Network: Monitorização de pedidos de rede (HTTP/HTTPS), análise dos seus tempos de execução e conteúdo.
• Performance: Análise do desempenho de carregamento e execução do código da página.
• Memory: Perfilagem do uso de memória, deteção de fugas.
• Application: Exploração dos recursos da aplicação — armazenamento (Local Storage, Session Storage, IndexedDB), cookies, cache.
• Security: Análise de segurança da página, incluindo verificação de certificados SSL.
• Lighthouse: Auditoria da página web segundo critérios de desempenho, acessibilidade, SEO e boas práticas.

Utilização em QA:

• Verificação UI/UX: Análise de estilos (Elements), adaptabilidade (Toggle device toolbar).
• Depuração do frontend: Detecção de erros em JavaScript (Console, Sources).
• Análise de interações API: Monitorização de pedidos e respostas (Network).
• Avaliação do desempenho: Estimativa do tempo de carregamento e execução de scripts (Performance).
• Exploração de armazenamento: Verificação de Local Storage, cookies, etc. (Application).
• Simulação de dispositivos: Testes em diferentes tamanhos de ecrã e condições de rede (Network – Throttling).