Como usar as ferramentas do desenvolvedor do Chrome para melhorar seu site WordPress

O Chrome Developer Tools (DevTools) é um conjunto incrível de ferramentas de criação e depuração na Web para o Google Chrome. As DevTools fornecem acesso aos elementos que constroem páginas da web. Você pode usar o DevTools para solucionar problemas com o layout, examinar e modificar CSS, definir pontos de interrupção de JavaScript, inspecionar o código para otimização e muito mais. As DevTools são gratuitas e já estão incorporadas ao seu navegador Chrome. Portanto, se você possui o Chrome, já os possui.

Neste artigo, teremos uma visão geral do que são as ferramentas e como usá-las para melhorar seu site WordPress.

Abrindo as ferramentas

Existem várias maneiras de abrir as ferramentas:

1. Selecione o menu Chrome, escolha Ferramentas e, em seguida, Ferramentas do desenvolvedor.
2. Clique com o botão direito em qualquer elemento na tela e selecione Inspecionar Elemento (meu método preferido).
3. Ctrl + Shift + I (para PC) | Cmd + Opt + I (para Mac)

A janela DevTools

A janela de ferramentas contém dois painéis. Ambos contêm ferramentas que podem ser usadas em conjunto. Aqui está uma olhada nas ferramentas.

O primeiro contém 8 grupos de ferramentas. As ferramentas incluem:

• Elementos
• Rede
• Fontes
• Linha do tempo
• Perfis
• Recursos
• Auditorias
• Console

A segunda seção contém:

• Estilos
• Calculado
• Ouvintes de eventos
• Pontos de interrupção do DOM (Document Object Model)
• Propriedades

Existem várias maneiras diferentes de visualizar as ferramentas. Você pode redimensionar as janelas para abrir espaço. Você também pode realocar as janelas à direita da tela para obter uma tela dividida com as ferramentas de um lado e seu site do outro.

Elementos

Este painel mostra a árvore DOM, que representa os elementos HTML de sua página e permite inspecionar ou editar qualquer um dos elementos. Você pode ver os ajustes de CSS em tempo real.

Você pode abrir e recolher qualquer um dos painéis para facilitar a visualização e navegação clicando nos nós (eles se parecem com setas ou triângulos). A visualização em árvore do DOM mostra o estado atual da árvore em vez do HTML original (por exemplo, pode ter sido modificado por JavaScript).

Quando você passa o mouse sobre um elemento na visualização em árvore, o elemento na página da Web será realçado. Ele mostrará informações como estilo da fonte, tamanho da imagem etc.

Se você clicar em um dos elementos, a janela à direita mostrará o CSS. Aqui você pode selecionar estilos e fazer modificações em fontes, cores, tamanhos, margens, bordas, preenchimento, etc.

No rodapé, você verá migalhas de pão para poder voltar atrás se precisar. Você pode editar qualquer um dos elementos apenas clicando neles e digitando suas alterações. Quando você pressionar Enter, você verá as alterações ocorrerem.

Por exemplo, esta imagem tem atualmente 600 pixels de largura. Eu posso selecionar a largura e digitar um novo valor e pressionar enter.

A imagem muda imediatamente para o novo tamanho.

Para alterar o estilo da fonte, basta selecionar a fonte e selecionar o que deseja alterar na janela de estilos à direita.

Você pode até mesmo arrastar os elementos e soltá-los em novos locais para alterar o layout da sua página.

Estou movendo comentários recentes acima de postagens recentes apenas arrastando o div.

Clicar com o botão direito oferece um novo conjunto de recursos. Você pode ver vários estados de elementos, modificar como HTML, definir quebras, copiar o caminho CSS e muito mais. Você também pode clicar com o botão direito e excluir um nó. É tão fácil que é quase assustador.

Usei essa ferramenta para encontrar tamanhos de imagem e inspecionar trechos de código.

Rede

O painel Rede mostra quais recursos do seu site são solicitados e baixados. É grafado em tempo real. Ver quais elementos demoram mais para baixar fornece informações sobre quais problemas corrigir para otimizar sua página.

Você pode filtrar e mostrar diferentes visualizações e tipos de gráficos, como cascata. Você pode registrar a atividade da rede e salvá-la para analisá-la mais tarde.

Você pode ver os detalhes dos recursos. Os detalhes incluem:

• Cabeçalhos de solicitação e resposta HTTP – exibe a URL de solicitação, o método HTTP, os códigos de status de resposta e lista a resposta HTTP e os cabeçalhos de solicitação com seus valores e parâmetros de string de consulta.
• Visualização de recursos – mostra uma visualização de recursos de imagem e JSON.
• Resposta HTTP – mostra o conteúdo não formatado do recurso.
• Nomes e valores de cookies – mostra os cookies que são transmitidos nos cabeçalhos de solicitação e resposta HTTP do recurso e limpa os cookies.
• Mensagens WebSocket – esta mostra as mensagens que são enviadas ou recebidas por uma conexão WebSocket.
• Tempo de rede do recurso – mostra um gráfico do tempo gasto nas fases da rede envolvidas no carregamento do recurso.

A visualização em cascata é uma ótima maneira de ver o tempo que leva para cada elemento carregar desde o início da solicitação até o último byte do elemento ser entregue. Ao ver quais elementos levam mais tempo, você pode ter uma melhor compreensão de onde fazer ajustes.

Você pode salvar os dados da rede para análise futura.

Fontes

Você pode usar o painel de fontes para ver e depurar seu código, como JavaScript e scripts que fazem parte da página carregada. Você pode pausar, retomar, percorrer o código e pausar em exceções. Ele inclui os recursos básicos de execução de código para que você possa passar por cima, entrar, sair e alternar pontos de interrupção. Você pode usar os pontos de interrupção para depurar JavaScript, atualizações de DOM e chamadas de rede. Você também pode definir pontos de interrupção condicionais onde qualquer expressão pode retornar como verdadeiro ou falso. O ponto de interrupção pausará o código se a condição for atendida.

Há um recurso de impressão bonito que facilita a leitura do código minificado. Isso também torna mais fácil ver onde colocar seus pontos de interrupção. Se isso não funcionar como você precisa, você pode usar um formato de mapeamento baseado em JSON chamado mapa de origem. Os mapas de origem são criados por um minificador que possui esse recurso integrado.

Linha do tempo

O painel Linha do tempo mostra onde o tempo é gasto para carregamento e uso da página. Ele irá pintar e traçar cada evento na linha do tempo. Ele mostrará recursos como JavaScript, cálculo de estilos e repintura. Você pode gravar os eventos e analisá-los em etapas. Existem três modos:

• Eventos – uma lista de todos os eventos organizados por tipo. Isso mostra quais tarefas levam mais tempo.
• Frames – mostra o trabalho que deve ser feito em cada frame do desempenho de renderização do seu site. Por exemplo, se o seu site renderizar a 60 quadros por segundo, ele mostrará o trabalho feito em 1/60 de segundo. Isso inclui carregar scripts, pintar o layout, manipular eventos, etc. Você pode usar isso para visualizar qualquer atividade anormal no carregamento da página.
• Memória – isso representa graficamente seu uso de memória ao longo do tempo. Ele mostra todos os documentos, nós e ouvintes de eventos mantidos na memória. Isso ajuda a descobrir o que está causando vazamentos de memória.

Perfis

Aqui você pode traçar o perfil do tempo de execução e uso de memória de páginas da web e aplicativos. Isso mostra onde os recursos estão sendo usados. Esta é uma boa ferramenta para otimizar seu código.

Ele gravará três tipos de perfil:

• Collect JavaScript CPU Profile – mostra o tempo de execução de suas funções JavaScript.
• Take Heap Snapshot – mostra o uso de memória e a distribuição de seus objetos JavaScript.
• Gravar alocações de heap – isso registra suas alocações de objetos para mostrar vazamentos de memória ao longo do tempo.

Recursos

Você pode usar este painel para inspecionar recursos. Ele mostrará informações sobre o IndexedDB, banco de dados SQL da Web, cookies de cache de aplicativos, armazenamento local e de sessão e muito mais. Você também pode inspecionar seus recursos visuais, como fontes, imagens e folhas de estilo.

A guia IndexedDB permite inspecionar seus bancos de dados IndexedDB e armazenamentos de objetos e exibir e excluir registros.

Você pode executar comandos SQL e visualizar os resultados em um formato tabular. Conforme você digita os comandos, ele fornece dicas para nomes de tabelas, comandos e cláusulas.

A guia de cookies mostra informações sobre cookies que foram criados por um HTTP ou JavaScript. Você pode excluí-los individualmente ou em grupos.

O Chrome armazena em cache os recursos do aplicativo. A guia de cache do aplicativo permite visualizar o status desses recursos. Ele também mostrará a URL do recurso, o tipo de recurso e seu tamanho.

O local e a sessão O painel de armazenamento permite visualizar, criar, excluir e editar pares de chave/valor de armazenamento local e de sessão que estavam criando com a API de armazenamento.

Auditorias

O painel Auditoria analisa a página à medida que ela carrega e sugere correções para otimizar o carregamento da página. Possui duas auditorias que separam as informações em duas categorias: Utilização da Rede e Desempenho da Página Web. Você pode executar ambas as auditorias ou apenas a que desejar. Você pode executar as auditorias no estado atual da página ou recarregar a página e auditar durante o carregamento.

Ele não entra em tantos detalhes quanto o Google PageSpeed ​​Insights, mas fornece informações suficientes para corrigir os frutos mais fáceis. Depois de passar pelo PageSpeed ​​Insights, minha página estava em boa forma, mas me deu algumas informações sobre o meu site que o Insights não deu.

Console

O console é usado para depuração. Você pode registrar diagnósticos, inserir comandos, avaliar JavaScript, criar perfis JavaScript, etc. Você pode gravar informações no console por meio da linha de comando. Usando a linha de comando, você pode usar funções para selecionar e inspecionar elementos no DOM, monitorar eventos e parar e iniciar o criador de perfil.

Modo de dispositivo

Um dos meus recursos favoritos é o Modo de dispositivo. Você pode acessar isso com o pequeno botão à esquerda de Elementos no menu. O Device Mode permite que você escolha entre 23 dispositivos móveis populares diferentes (Kindle Fire, vários iPhones, vários Galaxies, laptops, etc.) e veja como seu site se parece e reage nesse dispositivo.

Você também pode arrastar a tela para criar seu próprio tamanho de tela personalizado. O cursor imita a ponta do seu dedo para que a tela reaja com o mouse como faria com o seu dedo. Você também pode criar seus próprios dispositivos personalizados na tela de configurações.

Você também pode escolher o tipo de rede (3G, 4G, Wi-Fi, etc.) para analisar como o site se parece e reage nas diferentes redes e velocidades.

Gaveta

Na parte inferior da tela você encontrará a gaveta. Isso pode ser ativado ou desativado com o botão >_ no lado direito da barra de ferramentas. A gaveta contém:

• Console – a linha de comando do console. Isso torna o console disponível ao usar outros painéis.
• Pesquisar – encontre qualquer fonte. Você pode optar por ignorar maiúsculas e minúsculas e pesquisar expressões regulares.
• Emulação – ferramentas e configurações para o modo de dispositivo. Inclui recursos como acelerômetro e coordenadas de geolocalização.
• Rendering – mostra recursos de renderização como medidor de fps, bordas em camadas compostas, etc. A melhor parte deste é que ele mostrará possíveis gargalos.

É útil ter essas ferramentas na gaveta porque alguns dos painéis não incluem acesso a essas ferramentas.

Pensamentos finais

O Chrome Developer Tools (DevTools) é um conjunto incrível de ferramentas de criação e depuração na Web para ajudar você a melhorar seu site. Você pode arrastar e soltar elementos rapidamente para alterar o layout do seu site, solucionar problemas de vazamento de memória, solucionar problemas de carregamento de página, visualizar seu site em praticamente qualquer dispositivo móvel e tamanho de tela e muito mais. Esta visão geral está apenas arranhando a superfície de quão poderosas são essas ferramentas. A melhor coisa sobre isso é que já está embutido no Google Chrome para que você não precise baixar nada.

Eu gostaria de ouvir de você. Você usa as Ferramentas do desenvolvedor do Chrome? Quais são seus recursos favoritos? O que você mais usa? Você tem alguma dica sobre como usar as ferramentas? Conte-nos sobre isso nos comentários.