Como usar o Chrome DevTools para solucionar problemas de sites
O Chrome DevTools é um ativo essencial para desenvolvedores. Embora outros navegadores ofereçam ferramentas de solução de problemas bastante úteis, o Chrome DevTools merece sua atenção por causa de sua interface multifuncional e popularidade.
O Chrome é o navegador mais popular para desenvolvedores devido ao seu poderoso conjunto de ferramentas de depuração. Usar o Chrome DevTools é fácil, mas você precisa entender como funciona para obter o máximo dele.
Como funcionam as ferramentas para desenvolvedores do Chrome
O Chrome DevTools permite que você resolva problemas em um site por meio de seu console de erro e outras ferramentas de depuração e monitoramento. O uso do DevTools expõe brechas de frontend e permite monitorar como seu site aparece em dispositivos móveis e tablets.
Com DevTools, você pode realizar edições em tempo real no código de um site, como JavaScript, HTML e CSS, e obter resultados instantâneos de suas alterações.
As alterações feitas por meio do DevTools não afetam o site permanentemente. Eles exibem apenas temporariamente o resultado esperado, como se você os tivesse aplicado ao código-fonte real. Isso permite que você descubra maneiras de carregar seu site com muito mais rapidez e facilita a correção de bugs.
Como acessar o Chrome DevTools
Você pode acessar o Chrome DevTools de várias maneiras. Para abrir as ferramentas do desenvolvedor com o método de atalho no Mac OS, pressione Cmd + Opt + I. Se você estiver usando o sistema operacional Windows, pressione as teclas Ctrl + Shift + I do teclado.
Como alternativa, você pode acessar as ferramentas de desenvolvedor do Chrome clicando nos três pontos no canto superior direito da tela. Vá para Mais ferramentas e selecione Ferramentas do desenvolvedor . Outra opção é clicar com o botão direito na página da web e clicar na opção Inspecionar .
Usando as ferramentas do desenvolvedor do Chrome para diagnóstico de sites
O Chrome DevTools oferece várias maneiras de ajustar e solucionar problemas de uma página da web. Vamos dar uma olhada em algumas maneiras pelas quais o DevTools pode ajudá-lo.
Veja a aparência do seu site em um smartphone
Depois de alternar o navegador Chrome para o modo de desenvolvedor, ele renderiza uma versão com metade do tamanho de sua página da web. No entanto, isso não lhe dará uma visão real de como seria em um smartphone ou tablet.
Felizmente, além de definir o tamanho da tela de uma página da web, o Chrome DevTools também permite alternar entre diferentes tipos e versões de tela de celular.
Para acessar essa opção, ative o modo Inspecionar . Em seguida, clique na lista suspensa Responsive no canto superior esquerdo das DevTools e selecione seu dispositivo móvel preferido. A página da web então é renderizada e ajustada para caber no tamanho do dispositivo móvel selecionado.
Acesse os arquivos de origem de uma página da web
Você pode acessar os arquivos que constituem uma página da web por meio do Chrome DevTools. Para acessar esses arquivos, clique na opção Fontes na parte superior do menu DevTools. Isso expõe o sistema de arquivos do site e também permite a edição.
Você também pode pesquisar arquivos de origem, o que pode ser útil quando você está lidando com uma página da web que possui muitos recursos. Para pesquisar um arquivo de origem por meio do DevTools, clique na opção Pesquisar logo acima do console.
No entanto, se você não conseguir encontrar a opção Pesquisar , uma alternativa melhor é usar os atalhos do teclado. No Mac OS, pressione as teclas Cmd + Opt + F para pesquisar um arquivo de origem. Se você estiver usando o sistema operacional Windows, pressione a tecla Ctrl + Shift + F para acessar a barra de pesquisa do arquivo de origem.
Execute edições ao vivo em uma página da web
Um dos principais objetivos do uso do DevTools é realizar uma edição falsa instantânea dos elementos de uma página da web . Depois de alternar para as ferramentas de desenvolvedor, você pode editar o conteúdo HTML de um site clicando na opção Elementos . Em seguida, clique com o botão direito do mouse em qualquer ponto em que deseja aplicar as alterações no editor de código e selecione Editar como HTML .
Para editar as propriedades CSS que não são embutidas, selecione Fontes . Em seguida, selecione o arquivo CSS que deseja editar. Coloque o cursor na linha de escolha no console de código para realizar uma edição ao vivo. Isso fornece feedback instantâneo sobre quaisquer alterações de estilo que você aplicar à página da web.
Observe que, quando você edita uma página por meio do DevTools, recarregar a página em seu navegador a reverte à sua forma original e a edição fica visível apenas para você. A edição via DevTools não afeta o bom funcionamento nem o uso desse site para outros usuários.
Depure o código JavaScript com o console DevTools
Uma das melhores maneiras de depurar JavaScript é usando as ferramentas de desenvolvedor do Chrome. Ele fornece um relatório direto de scripts inválidos, bem como a localização exata do bug.
É uma boa prática sempre manter o DevTools aberto ao projetar um site com JavaScript. Por exemplo, a execução do comando console.log () do JavaScript em um conjunto de instruções exibe o resultado desse log no console do DevTools se o programa for executado com êxito.
Por padrão, o console relata quaisquer problemas de JavaScript em seu site. Você pode encontrar o console na parte inferior do DevTools ou acessá-lo clicando na opção Console na parte superior da janela do Chrome DevTools.
Monitore o carregamento de recursos de um banco de dados
Além de depurar JavaScript, o console também pode fornecer detalhes dos recursos que não estão sendo carregados corretamente do banco de dados do site.
Embora nem sempre seja a melhor maneira de depurar problemas de back-end, ela ainda informa quais recursos estão retornando um erro 404 após executar uma consulta de banco de dados desses elementos.
Mudar a orientação das ferramentas de desenvolvedor do Chrome
Para alterar a posição das ferramentas de desenvolvedor do Chrome, clique nos três pontos do menu dentro do DevTools (não o principal no navegador). Em seguida, selecione sua posição preferida na opção do lado do Dock .
Instale extensões Chrome DevTools
Você também pode instalar extensões específicas de linguagem ou estrutura que funcionam com o Chrome DevTools. A instalação dessas extensões permite que você depure sua página da web com mais eficiência.
Você pode acessar uma lista de extensões disponíveis para Chrome DevTools na galeria de extensões de DevTools em destaque do Chrome.
Verifique se há problemas de segurança em um site
O Chrome DevTools permite que você avalie o quão seguro é seu site, com base em parâmetros como disponibilidade de certificados de segurança da web e quão segura é a conexão, entre outros. Para verificar se o seu site é seguro, clique na opção Segurança na parte superior do DevTools.
A guia Segurança oferece uma visão geral dos detalhes de segurança do seu site e informa sobre quaisquer ameaças potenciais.
Audite seu site
O Chrome DevTools tem um recurso que permite verificar o desempenho geral do seu site com base em parâmetros específicos.
Para acessar esse recurso, selecione a opção Lighthouse na parte superior da janela DevTools. Em seguida, selecione os parâmetros que deseja verificar e marque as opções Móvel ou Desktop para ver o desempenho de sua página da web em diferentes plataformas.
Em seguida, clique em Gerar relatório para executar uma análise de sua página da web com base nos parâmetros selecionados anteriormente.
Você também pode avaliar o tempo de execução ou desempenho de carregamento de um site clicando na opção Desempenho . Para executar um teste, clique no ícone ao lado da opção Clique no botão Gravar para executar uma análise em tempo de execução. Como alternativa, clique no botão recarregar abaixo dele para avaliar o desempenho do tempo de carregamento. Clique em Parar para parar o analisador e exibir os resultados.
Aproveite as vantagens do Chrome DevTools
Dependendo do que você precisa, o Chrome DevTools permite que você faça mais do que apenas depurar sites. Felizmente, DevTools são fáceis de usar para programadores de todos os níveis de habilidade. Você pode até aprender algumas noções básicas de desenvolvimento de front-end de sites procurando o código-fonte dos sites que visita.
Você também pode descobrir algumas outras opções que não discutimos neste artigo. Portanto, fique à vontade para brincar com os recursos disponíveis. Além disso, ajustar esses recursos não prejudica nem um pouco um site.
