Nenhum site é construído perfeitamente. Como todos os produtos fabricados por humanos, os erros de código fazem parte do processo. É por isso que é importante testar minuciosamente qualquer novo site que você construa para garantir que seja o mais livre de erros possível para oferecer aos usuários a melhor experiência possível.
Você não deve testar um site sem experimentar o kit DevTools do Google Chrome. O modo de desenvolvedor do Chrome permite testar e testar minuciosamente um novo site (ou um já existente) para encontrar e corrigir bugs. Também pode fornecer informações sobre como outros sites são executados, incluindo a exibição do código-fonte.
Aqui está tudo o que você precisa saber sobre o modo de desenvolvedor do navegador Google Chrome, quais ferramentas ele possui e como usá-lo com eficiência.
O que é o Chrome Modo de desenvolvedor?
Quando nos referimos ao modo de desenvolvedor do Chrome, não estamos falando dos mesmo modo de desenvolvedor que você verá nos Chromebooks. O que estamos nos referindo são as extensas ferramentas de desenvolvimento do Chrome (chamadas Google DevTools) que são incorporadas ao próprio navegador.
Essas são ferramentas projetadas para testar, analisar e intencionalmente interrompa (se necessário) uma página da Web carregada no navegador Google Chrome para fins de teste. Em um nível básico, você pode usar o DevTools para visualizar o código-fonte de um site, permitindo ver como um site foi construído e o quão bem ele é executado.
Google O DevTools oferece mais do que isso, no entanto. Você pode usar o modo de desenvolvedor do Chrome para alterar uma página após o carregamento, executar comandos do console do Google Chrome para controlar e manipular a página, além de executar testes de velocidade e rede para monitorar o tráfego da Web.
In_content_1 all: [300x250] / dfp: [640x360]->Você também pode emular outros dispositivos, incluindo diferentes sistemas operacionais e resoluções de tela, no modo Chrome DevTools. Isso permite que você veja se um site possui um design responsivo da Web e onde o conteúdo e os layouts do site serão alterados dependendo da resolução ou do tipo do dispositivo.
Embora essas ferramentas sejam voltadas para desenvolvedores ou testadores profissionais da Web, também é útil para que usuários padrão do Chrome conheçam o pacote DevTools. Se você encontrar um problema em um site que não pode resolver, alternar para o modo de desenvolvedor do Chrome pode ajudar a verificar se o problema está no site ou no navegador.
Como acessar o Google Menu do DevTools do Chrome
Existem algumas maneiras de acessar o menu do DevTools do Google Chrome, dependendo da ferramenta que você deseja usar.
O método mais fácil de fazer isso é do menu do Google Chrome. Para fazer isso, clique no ícone do menu de três pontosno canto superior direito. No menu exibido, clique em Mais ferramentas>Ferramentas de desenvolvedor.
Isso abrirá o kit do DevTools em um novo menu no lado direito da guia ou janela do Chrome aberta.
Você também pode fazer isso usando atalhos de teclado. Em um PC com Windows ou Linux, abra o navegador Chrome e pressione a tecla F12. Você também pode pressionar as teclas Ctrl + Alt + Jou Ctrl + Alt + Iem uma guia ou janela aberta do Chrome.
No macOS, pressione F12ou pressione as teclas Option + Command + Jou Option + Command + Ipara abrir o menu do Chrome DevTools. Isso abrirá o console do Chrome, com opções para ir para outras ferramentas do Chrome na parte superior do menu do DevTools.
Se você quiser, poderá visualizar o código-fonte de um site (abrindo os Elementosdo menu do DevTools no processo) em qualquer página da Web aberta, clicando com o botão direito do mouse na opção Inspecionar.
Usando o Chrome DevTools
Como abordamos brevemente, você pode usar o kit do Chrome DevTools para ver o código-fonte de um site na guia Elementos. Permite analisar o código por trás da página que você carregou, além de exibir mensagens de erro (indicando problemas com o carregamento do site) no console do Chrome, na guia Console.
Você também pode visualizar as diferentes fontes de conteúdo de um site na guia Fontes. Por exemplo, se um site for usando uma rede de entrega de conteúdo (CDN), a mídia de um site será listada como uma fonte diferente aqui.
O modo de desenvolvedor do Chrome permite que você baixe esse conteúdo diretamente ou realize mais análise complexa do conteúdo.
Se você quiser testar o desempenho de um site, poderá monitorar e registrar o uso da sua rede na guia Rede. Isso mostrará a velocidade, o tamanho e o tipo de solicitações de rede feitas entre o navegador e o site.
Por exemplo, quando uma página é carregada pela primeira vez, o site carrega o conteúdo da página, mas também pode solicitar dados de bancos de dados de terceiros. Por exemplo, quando você entra, isso pode consultar um banco de dados que apareceria como uma solicitação de rede aqui.
Você pode analisar isso ainda mais na guia Desempenho, onde você pode gravar o uso do navegador Chrome com maior profundidade, incluindo a captura de tela em diferentes pontos. Isso registrará quanto tempo leva para carregar seu site para análises adicionais.
O Google Chrome tem uma reputação de sendo difícil na memória do seu PC, para que você possa testar o uso de memória JavaScript do seu site na guia Memória. Diferentes perfis de teste do Chrome podem ser usados aqui, com mais informações sobre esse teste em Página de documentação do Chrome DevTools.
Para uma análise mais aprofundada do conteúdo do site, também como qualquer armazenamento do navegador que esteja usando (por exemplo, para registrar dados), você pode pesquisar na guia Aplicativo. Você pode visualizar as informações de cookies do site aqui na seção Cookies, ou limpar o armazenamento usado clicando na opção Limpar armazenamento.
Se você estiver preocupado com a segurança do site, verifique o desempenho da guia Segurança. Isso fornecerá uma rápida visão geral da análise de segurança do Chrome para uma página, incluindo se a página possui ou não um certificado SSL correto e confiável.
Se você deseja gerar um relatório no seu site desempenho, incluindo se ele atende aos padrões típicos do usuário e se o desempenho do site pode estar afetando a otimização do mecanismo de pesquisa, você pode clicar na guia Farol. Isso oferece configurações que você pode marcar ou desmarcar para o seu relatório - clique em Gerar relatóriopara criar o relatório a ser visualizado.
Isso apenas arranha a superfície do potencial que o Chrome O modo de desenvolvedor pode trazer para os desenvolvedores. Se você quiser saber mais, os Documentação do DevTools do Chrome devem ajudá-lo com as ferramentas e os recursos oferecidos, incluindo como criar seus próprios testes de usuário.
Truques avançados do Google Chrome
A maioria dos usuários do Chrome nunca saberá que o kit DevTools do Google Chrome existe em seu navegador, mas para usuários avançados, ele continua sendo uma maneira excepcionalmente útil de testar e analisar sites. Também existem Extensões do Chrome para desenvolvedores da web de terceiros disponíveis para ajudar a testar ainda mais seu site.
Se você é construindo um site básico, alternar para o modo de desenvolvedor do Chrome pode ajudá-lo detectar erros no seu site que não são visíveis imediatamente. Você só pode fazer isso se o Chrome estiver funcionando corretamente; portanto, se você tiver 7 anos, talvez seja necessário redefinir ou reinstalar o navegador primeiro.