Por que você deve começar a usar as ferramentas de desenvolvedor do Chrome agora mesmo

Ter um bom conjunto de ferramentas úteis para ajudar a testar seu site é essencial para os desenvolvedores. Onde é o melhor lugar para mantê-los? No seu navegador, é claro! O navegador da web popular do Google, o Chrome, tem ferramentas de desenvolvedor integradas. É um conjunto de ferramentas feitas para criação e depuração na web. As Ferramentas do desenvolvedor do Chrome (conhecidas como DevTools) fornecem aos desenvolvedores acesso ao funcionamento interno do navegador da web e aplicativos da web.

Usando o Chrome DevTools você pode saber os estilos que são usados, o tamanho das imagens, os scripts que são usados, etc. Você pode depurar e saber quais erros existem na página. Você pode até ativar ou desativar os estilos, ou alterá-los completamente, para ver o efeito que isso tem em seu site.

Está no seu navegador

As ferramentas em si são fáceis de acessar. Aqui estão três maneiras de abri-los:

1. No navegador Chrome - selecione o menu Chrome (as três barras horizontais no canto superior direito), selecione Mais ferramentas e, em seguida, selecione Ferramentas do desenvolvedor.
2. Clique com o botão direito em um elemento em qualquer página e selecione Inspecionar elemento.
3. No teclado do Windows, selecione ctrl + shift + i. No Mac, selecione cmnd + opt + i.

Qualquer um deles abrirá a janela DevTools na parte inferior do seu navegador.

Janela Primária

As ferramentas aparecem na parte inferior da tela. Você verá uma janela principal com menus na parte superior e elementos como a visualização padrão e uma janela secundária com menus e estilos como a seleção padrão.

As ferramentas são agrupadas em tarefas. Existem 8 grupos que incluem Elementos, Rede, Fontes, Linha do tempo, Perfis, Recursos, Auditorias e Console.

Elementos

Aqui você pode ver a estrutura HTML da sua página. Há um botão de alternância na parte inferior para HTML e Corpo. Você pode passar o mouse sobre qualquer um dos elementos para ver informações detalhadas sobre cada um.

Você pode clicar nas setas para abrir e fechar o conteúdo dos elementos primários para torná-los mais fáceis de ler. Assim, você pode fechar o corpo e apenas ler o cabeçalho, escolher o elemento dentro do cabeçalho para ver, etc. Esta é uma excelente ferramenta para visualizar o HTML do seu site.

Rede

Isso mostra cada elemento que será carregado, como eles são carregados, o tipo de arquivo, o tamanho do arquivo, o tempo que leva para carregar e uma linha do tempo de quando ele será carregado na sequência de carregamento da página. Isso pode ser usado para solucionar problemas de rede, como gargalos no carregamento de páginas e solicitações incorretas.

Por exemplo, se você vir muitos erros 404, pode olhar mais de perto para ver quais são os problemas. Talvez você tenha retirado uma página que ainda está recebendo muito tráfego, ou talvez alguém tenha digitado um link errado.

Fontes

Isso mostra os scripts e snippets que serão carregados e de onde eles vêm.

Linha do tempo

Mostra o tempo de carregamento de cada recurso. Você pode ver o que leva mais tempo, o que ajuda a reduzir o carregamento da página.

Perfis

Isso mostra o uso de memória de cada elemento. Isso é ótimo para mostrar qual código precisa ser otimizado.

Recursos

Aqui você pode inspecionar os recursos que são carregados. Você pode consultar cookies, cache de aplicativo, bancos de dados HTML5, etc.

Auditorias

Isso permite que você analise a página. Você pode auditar depois de carregar ou enquanto carrega.

Estado Atual de Auditoria

Primeiro, optei por executar Auditoria do Estado Atual. Isso executa a auditoria enquanto o site está instalado no momento, já carregado em meu navegador.

Ele me dá uma lista de itens, os colore de acordo com sua importância e mostra o número de questões. Posso ver mais detalhes clicando sobre eles.

Ampliei vários deles para ver as informações detalhadas sobre cada um. Ele me fornece informações sobre a utilização da rede e o desempenho da página da web. Ele me dá conselhos sobre como corrigir os problemas e os prioriza para mim.

Recarregar página e auditar no carregamento

Voltei e selecionei para auditar na carga. Os resultados são semelhantes, mas, como esperado, há mais problemas ao carregar a página do que após o carregamento da página.

Entre os dois, obtenho informações sobre JavaScript, cache do navegador, cache do proxy, tamanho do cookie, veiculação de conteúdo de um domínio sem cookies, dimensões da imagem, ordem e estilos de scripts, colocação de CSS no cabeçalho do documento, remoção de riles CSS não utilizados e uso de CSS normal nomes de propriedades. Claro que os resultados variam dependendo do site.

As informações não são tão detalhadas quanto o PageSpeed ​​Insights, mas são o suficiente para começar e gosto da conveniência de serem integradas à ferramenta que estou usando de qualquer maneira. Recomendo executá-lo sempre que fizer uma alteração em seu site. É muito fácil de usar para não usá-lo.

Console

Este é o Console JavaScript onde você pode testar páginas e aplicativos. Você pode depurar seus scripts e obter conselhos sobre quais alterações fazer. O Console permite que você insira comandos para interagir com sua página da web. Ele registrará as informações de diagnóstico para ajudá-lo com a depuração. Você pode usá-lo na tela principal ou na gaveta (a janela sob a tela principal).

Você pode usar o Console ou APIs de linha de comando. Você pode gravar no console, formatar seus elementos e estilos de saída, medir o tempo de execução ou carregamento, visualizar e marcar a linha do tempo, contar instruções, definir pontos de interrupção, avaliar expressões, monitorar eventos, empilhar mensagens, ver erros e avisos e muito mais mais.

Esta é uma ferramenta poderosa, mas é muito útil. Felizmente, um bom material de referência é fornecido com exemplos de como usá-lo.

Depurando

Selecionar ctrl + p no Windows, ou cmd + p no Mac, irá abrir a tela de depuração onde você pode selecionar os scripts para depurar. Essa ferramenta oferece os recursos de depuração que você esperaria ver em qualquer ambiente de programação: pausar, continuar, entrar, avançar, pontos de interrupção, código formatado, etc.

Arquivos de ajuda detalhados são fornecidos para orientá-lo no uso do modo de depuração.

Janela de estilos CSS

A caixa à direita contém todas as informações CSS. Conforme você seleciona um elemento, a janela Estilos à direita mostra as informações de estilo do elemento. Esta seção é interessante. Existem cinco grupos de ferramentas: Estilos, Computado, Ouvintes de Eventos, Pontos de Interrupção DOM e Propriedades.

Estilos

Você pode selecionar os estilos e alterá-los manualmente nesta janela. Por exemplo, você pode selecionar o tamanho e a cor da fonte.

Selecione o tamanho da fonte e insira seu próprio tamanho. Ao fazer isso, o tamanho da fonte selecionada mudará na tela.

Fazer a seleção em uma cor de fonte abrirá o seletor de cores. Selecione a cor desejada e pressione Enter. Você verá a fonte selecionada mudar para a nova cor. Esta é uma ótima maneira de experimentar novos estilos, tamanhos e cores de fonte.

Se você clicar no site.CSS à direita, abrirá uma janela maior com as informações detalhadas. Aqui, você pode digitar o nome da fonte que deseja usar, especificar uma cor, especificar um tamanho, etc.

Computado

Isso mostra o tamanho da caixa em pixels. Possui preenchimento, borda e margem.

Modo Dispositivo

Há um pequeno botão à esquerda entre a lupa e o menu Elementos que se parece com um dispositivo móvel. Adivinha? É um dispositivo móvel. Este é o modo de emulação do dispositivo. Essa é uma ótima maneira de ver como seu site é responsivo.

Dispositivo

O que é ainda mais legal do que apenas ser um dispositivo móvel é que você pode escolher qual dispositivo móvel é e, em seguida, ver o site como se estivesse olhando para ele naquele dispositivo. Agora, ISSO é incrível!

Selecionei Amazon Kindle Fire HDX 7 ”e a tela imitou aquele dispositivo para que eu pudesse ver como o site ficaria em sua tela e como o toque funcionaria.

Você pode alterar a orientação da tela clicando no botão Trocar Dimensões.

Esta é uma ótima maneira de ver a aparência do seu site WordPress na tela menor do celular. Escolhi o iPhone 6 e o ​​tamanho da tela mudou para corresponder ao novo tamanho e resolução da tela. Existem muitos dispositivos para ver. Você também pode ver um tamanho personalizado arrastando os lados para aumentar ou diminuir o tamanho.

Rede

Também há uma opção para escolher o tipo de rede pela qual você está acessando o site. Isso permite que você veja o desempenho do seu site por meio de vários tipos e velocidades de conexão. Você pode testar várias velocidades de 50 Kbps GPRS a 30 Mbps WiFi, e várias velocidades de conexão 2G, 3G e 4G. Essa é uma excelente maneira de testar a velocidade do seu site por meio de redes cariosas e obter insights sobre o que melhorar.

Consultas de mídia

Há um pequeno botão no canto superior esquerdo que se parece com degraus de escada. Ele abre outra seção da tela acima da janela do site que mostra diferentes larguras de pixels. Clicar neles leva a tela do celular a esse tamanho. Eles mostram a você:

• Consultas visando uma largura máxima
• Larguras dentro de um intervalo
• Consultas visando uma largura mínima

Isso ajuda você a ajustar os estilos e o conteúdo de mídia para um design totalmente responsivo.

A gaveta

Há outra seção de ferramentas na tela principal chamada gaveta. Isso adiciona:

Console - este é o mesmo console da janela principal. Colocando-o aqui, você pode usá-lo junto com qualquer uma das ferramentas na janela principal.

Pesquisar - permite que você pesquise fontes.

Emulação - você pode escolher Dispositivo (aqui você pode escolher o modelo, resolução, rede, etc.), Mídia, Rede (taxa de transferência e agente do usuário) e Sensores (tela sensível ao toque, acelerômetros, etc.).

Renderização - mostra retângulos de pintura, bordas de camadas compostas, medidor de FPS, repintura contínua de página e possíveis gargalos de rolagem.

Configurações e mais

A barra de menu à direita informa o número de erros e avisos em seu site, permite ocultar a gaveta na parte inferior, permite ajustar as configurações e encaixar a ferramenta na janela principal (criando uma tela dividida entre seu site e as DevTools).

Há uma grande quantidade de configurações que você pode ajustar para modificar as ferramentas para que funcionem da maneira que você precisa.

Chrome Canary

Se você realmente deseja estar na vanguarda do Chrome DevTools do Google, experimente o Chrome Canary. Seu ícone é amarelo. Pegue? Precisa de uma capa. É o melhor e mais recente do Google. Ele foi projetado para desenvolvedores e possui a versão mais recente do DevTools. Ainda não é estável o suficiente para uso geral, então provavelmente quebrará seu sistema.

Se você está propenso a causar sérios danos ao ambiente quando o sistema quebra, olhe para o ícone do Chrome Canary na imagem acima e não pisque por cinco segundos.

Agora você pode seguir em frente. Você não vai se lembrar desta parte.

Empacotando

As Ferramentas do desenvolvedor do Google Chrome são uma ótima ferramenta para solucionar problemas, melhorar o desempenho da rede, ver seu site em diferentes tamanhos e resoluções de tela e obter informações sobre onde seu site precisa de melhorias. Existem muitos recursos e você pode adicionar ainda mais por meio de extensões. Essas ferramentas por si só são um grande motivo para instalar o Google Chrome, mesmo se não for seu navegador principal. Dedicar algum tempo para aprender os recursos valerá a pena, e seu site e os visitantes agradecerão por isso.

Sua vez! Você usa as Ferramentas do desenvolvedor do Chrome? Eu deixei de fora seu recurso favorito? Você tem alguma coisa pra acrescentar? Eu gostaria de ouvir sobre isso nos comentários abaixo!

Imagem em miniatura do artigo por Anikei / shutterstock.com