As Ferramentas para desenvolvedores, encontradas no Chrome, oferecem um conjunto abrangente de ferramentas para ajudar os desenvolvedores a depurar, testar e otimizar seus sites. Aqui está um guia sobre como abrir e usar as ferramentas do desenvolvedor:
Abrir ferramentas para desenvolvedores: 1.
Usando atalho de teclado :pressione
Ctrl + Shift + I (Windows/Linux) ou
Comando + Opção + I (macOS) no seu teclado.
2.
No menu do Chrome :clique nos três pontos verticais no canto superior direito do navegador Chrome, selecione “Mais ferramentas” e depois “Ferramentas do desenvolvedor”.
3.
Usando o menu de contexto :clique com o botão direito em qualquer elemento da página da web e selecione “Inspecionar”.
Explore os painéis da ferramenta: Assim que as ferramentas do desenvolvedor estiverem abertas, você verá vários painéis, como “Elementos”, “Console”, “Fontes”, “Rede” e muito mais. Cada painel tem uma finalidade diferente:
-
Elementos :este painel exibe a estrutura HTML e o estilo CSS da página da web atual. Você pode modificar elementos e estilos em tempo real e observar as alterações.
-
Consola :permite visualizar mensagens, erros e avisos gerados pelo navegador ou JavaScript. Você também pode inserir e executar código JavaScript aqui.
-
Fontes :se o site for criado localmente, esse painel permitirá inspecionar seus arquivos de código-fonte local, definir pontos de interrupção e depurar seu código JavaScript.
-
Rede :fornece informações sobre solicitações de rede feitas pelo site, incluindo tempo, códigos de status, cabeçalhos e dados de resposta.
-
Desempenho :permite analisar o desempenho do site registrando e visualizando métricas como tempo de carregamento da página, carregamento de recursos e taxas de quadros.
Alternar modo de dispositivo :
Você pode simular diferentes dispositivos e tamanhos de tela clicando no botão "Alternar barra de ferramentas do dispositivo" nas Ferramentas do desenvolvedor. Isso ajuda a testar como seu site responde a diferentes dispositivos.
Fazer capturas de tela :
O botão "Capturar capturas de tela" permite fazer capturas de tela da página da web ou de elementos selecionados, o que pode ser útil para documentação ou relatórios.
Registrar ações do usuário :
O recurso "Gravar ações do usuário" permite registrar as interações do usuário na página da web. Isso pode ser útil para depuração, reprodução de problemas ou criação de tutoriais.
Usar menu de comandos :
Acesse comandos adicionais pressionando
Ctrl + Shift + P (Windows/Linux) ou
Command + Shift + P (macOS). Isso abre um menu de comando onde você pode pesquisar e executar rapidamente vários comandos das Ferramentas do Desenvolvedor.
Lembre-se de que as ferramentas para desenvolvedores são muito versáteis e a prática constante o ajudará a utilizar totalmente seus recursos para aprimorar seu fluxo de trabalho de desenvolvimento web e solucionar problemas de maneira eficaz.
