Como usar as ferramentas de desenvolvedor do navegador

As ferramentas de desenvolvedor são recursos integrados nos navegadores modernos que permitem inspecionar, modificar e depurar páginas web em tempo real. Elas são essenciais para desenvolvedores, designers e qualquer pessoa que precise entender como uma página web funciona.

1. Abra as ferramentas de desenvolvedor. Pressione F12 no Windows ou Linux, ou Cmd+Option+I no Mac. Alternativamente, clique com o botão direito em qualquer elemento da página e selecione "Inspecionar" ou "Inspecionar elemento". As ferramentas aparecerão na parte inferior ou lateral da janela do navegador.
2. Navegue pelas abas principais. Explore as abas "Elements" ou "Elementos" para visualizar o HTML, "Console" para executar JavaScript e ver mensagens de erro, "Sources" ou "Fontes" para ver arquivos de código, e "Network" ou "Rede" para monitorar requisições. Cada aba oferece funcionalidades específicas para diferentes tarefas de desenvolvimento.
3. Inspecione elementos HTML. Na aba "Elements", clique no ícone de seleção no canto superior esquerdo, depois clique em qualquer elemento da página para selecioná-lo. O código HTML correspondente será destacado no painel inferior. Use as setas ao lado dos elementos para expandir ou recolher seções do código.
4. Modifique estilos CSS em tempo real. Com um elemento selecionado, visualize seus estilos CSS no painel "Styles" à direita. Clique em qualquer propriedade CSS para editá-la diretamente. Adicione novas propriedades clicando no espaço vazio ou desmarque propriedades existentes clicando na caixa de seleção ao lado delas.
5. Execute código JavaScript no Console. Acesse a aba "Console" e digite comandos JavaScript diretamente. Pressione Enter para executar uma linha ou Shift+Enter para quebrar linha. Use console.log() para imprimir valores, document.querySelector() para selecionar elementos, ou qualquer código JavaScript válido.
6. Monitore requisições de rede. Na aba "Network", recarregue a página para ver todas as requisições HTTP feitas. Clique em qualquer requisição para ver detalhes como cabeçalhos, resposta e tempo de carregamento. Use os filtros no topo para mostrar apenas tipos específicos de arquivos como CSS, JS ou imagens.
7. Simule dispositivos móveis. Clique no ícone de dispositivo móvel na barra de ferramentas ou pressione Ctrl+Shift+M (Windows/Linux) ou Cmd+Shift+M (Mac). Selecione um dispositivo predefinido ou defina dimensões personalizadas. Ajuste a orientação e simule diferentes densidades de pixel para testar design responsivo.