DevTools do Google Chrome para não desenvolvedores

Publicados: 2020-12-16

O Google Chrome está entre os navegadores mais usados, com quase 65% dos usuários globalmente. E há um bom motivo para isso, ele funciona bem, oferece suporte a uma tonelada de recursos da web, integra-se nativamente com tudo o que o Google oferece e é fácil de usar.

Mas há mais do que o lado do usuário. É muito bem construído para desenvolvedores também. O Firefox é outro grande navegador que oferece uma excelente experiência de desenvolvimento, embora sua base de usuários seja relativamente pequena. Portanto, por esse motivo, estamos nos concentrando no Chrome e em suas DevTools, mas, felizmente, a interface do usuário entre a maioria dos navegadores continua muito semelhante, então as dicas aqui serão bem traduzidas para Firefox, Safari, Edge e outros navegadores.

O que é o Chrome DevTools?

Chrome DevTools é um conjunto de ferramentas de desenvolvedor da web integradas diretamente no navegador Google Chrome. DevTools pode ajudá-lo a editar páginas em tempo real e diagnosticar problemas rapidamente, o que, em última análise, ajuda a criar sites melhores e mais rápidos.
Página inicial de documentos do Chrome DevTools

As DevTools são o que a maioria dos desenvolvedores de front-end (e frequentemente de back-end) usam para inspecionar o desempenho de uma página da web, as tags HTML que a definem e os estilos que são aplicados em sua forma mais básica. Ele fornece uma tonelada de outros recursos superúteis que veremos, desde que funcionem no caso de uso geral para não desenvolvedores também.

O que são Chrome DevTools

As ferramentas de desenvolvimento são o que você vê na imagem acima com o código à esquerda e várias propriedades à direita. Essa é a visualização padrão que você veria se pressionasse Command + Option + C (Mac) ou Control + Shift + C (Windows, Linux, Chrome OS).

DevTools oferece muitos recursos, mas os mais notáveis ​​seriam:

  • A estrutura do documento gerado (HTML) quando a página é carregada e durante o carregamento.
  • O que CSS se aplica a elementos HTML específicos, bem como o que é herdado dos pais.
    Veja o tamanho da janela de visualização, os tamanhos dos elementos, preenchimentos, margens, bordas e muito mais.
  • A capacidade de modificar tudo na página, exceto os scripts que estão sendo executados.
  • Ausente para fazer alterações no código que são salvos depois de atualizar a página (embora não seja possível por padrão)
  • Todas as alterações são do lado do cliente - ou seja, tudo o que você alterar, somente você verá até atualizar a página.
  • Fora para testar sem caches e com velocidade de rede mais lenta simulada.
  • Ferramentas para medir o desempenho e pontuar o desempenho de uma página, além de fornecer dicas para resolvê-lo.
  • Mostra o console da página e seus erros, avisos e mensagens, bem como uma forma de executar o código javascript lá.

Esta é uma lista muito curta, mas cobre alguns dos recursos mais notáveis, principalmente o que iremos cobrir.

Relacionado : Como criar sua primeira extensão do Chrome

Por que você precisa de DevTools, quais são os casos de uso?

Para desenvolvedores, é óbvio, mas e os não desenvolvedores? Bem, existem alguns truques e dicas legais que o levarão mais perto de um status de usuário avançado. Freqüentemente, os proprietários de sites identificam problemas no site, fazem uma ou duas perguntas e, às vezes, recebem um trecho de código para “colar” e consertar um problema. Uma das maneiras pelas quais os desenvolvedores testam esses snippets é aplicando-os diretamente às ferramentas de desenvolvimento. É também uma forma de fornecer aos seus desenvolvedores uma boa prévia de como você deseja que as coisas pareçam.

Aplicar código CSS

O primeiro e mais comum uso do DevTools é modificar e aplicar CSS. CSS é o que define a aparência de uma página, é a estética. Para fazer isso, você simplesmente precisa apontar para o elemento que deseja estilizar, clicar com o botão direito e selecionar “inspecionar”

Aplicar código CSS

O mesmo se aplica à maioria dos outros navegadores, embora o texto do item de menu possa variar um pouco. Depois de fazer isso, você verá o DevTools abrir e selecionar diretamente o elemento necessário. Lá, você verá as duas partes principais das ferramentas de desenvolvimento. Os lados HTML e CSS (esquerdo e direito):

Aplicar código CSS 2

Pode ser um pouco complicado se orientar na parte HTML, mas não se preocupe, o DevTools destacará os elementos conforme você os passa no painel esquerdo. Depois de encontrar o que precisa, à direita você pode escrever estilos. Já existem alguns adicionados. Então, vamos mudar o plano de fundo para ler e ver como fica:

Aplicar código CSS 3

Assim que você digitar, os estilos da página serão atualizados. Você pode escrever qualquer CSS aqui e ele será aplicado da mesma forma que os estilos já existentes na página. Se você pressionar próximo ao final das regras (em “largura”), ele começará a adicionar novos estilos. Ou você pode escrevê-los no topo onde diz “element.style”. Então, se você quiser compartilhar isso com seus desenvolvedores, basta selecionar o código e copiá-lo e colá-lo. Dica profissional, pegue também o “seletor” para os estilos. Este é o “.RNNXgb” na imagem acima. Isso dirá aos desenvolvedores em qual elemento você está adicionando estilos.

Relacionado : CSS do WordPress: Guia básico para iniciantes

Escolha uma cor

Outra coisa legal que você pode fazer é descobrir qual cor exatamente é usada, bem como usar um seletor de cores diretamente das Ferramentas do desenvolvedor para ver outras cores. Basta clicar no quadrado ao lado do código de cores (onde a seta acima aponta) e um seletor de cores será aberto.

escolha uma cor

Encontre qual fonte é usada

Os desenvolvedores CSS também definem as fontes em uso, o tamanho da fonte, a altura da linha, a cor, a espessura da fonte e outras propriedades relacionadas à tipografia. Todos eles seriam mostrados no lado direito. Contanto que não seja cruzado, o estilo que você vê é aplicado. Vamos descobrir qual fonte é usada para a pesquisa no formulário do Google. Clique com o botão direito, inspecione e role para baixo até ver a fonte ou apenas pesquise no campo "Filtro" acima no topo da seção direita:

Encontre qual fonte é usada1

Se você for em frente e atualizar a fonte, verá como o site ficaria com uma fonte diferente, para a qual você pode querer mudar em breve. Claro, um desenvolvedor mais tarde terá que modificar o código e corrigir quaisquer problemas que uma mudança de fonte possa criar, mas este método funciona muito bem para testar as coisas rapidamente sem ter nenhum ambiente de desenvolvimento definido.

.Encontre qual fonte é usada 2

Aqui está como a página inicial do Google ficaria com “Georgia” definida como fonte. Para fazer isso, tivemos que atualizar mais de uma propriedade, mas graças à boa arquitetura CSS dos desenvolvedores do Google, foi bastante fácil. Na maioria das vezes, um site mal escrito exige que você atualize várias propriedades para ver todo o site atualizado.

Relacionado : Como escolher as melhores fontes para o seu site

Cache, aceleração e velocidade

O que é cache? Em termos mais simples, um recurso que é salvo em sua máquina para uso futuro. Um recurso pode ser JS, arquivo CSS ou uma imagem. Se ele não muda toda vez que você abre uma página, não há necessidade de baixá-lo todas as vezes, certo? Assim, o navegador simplesmente o manterá em sua máquina por um tempo.

Mas o que acontecerá se houver uma alteração no servidor e a configuração não utilizar as melhores práticas para atualizar os recursos? Ou, em resumo, mesmo que os desenvolvedores tenham mudado a base de código, você ainda verá estilos antigos. Bem, então você pode apenas parar o cache e fazer uma “atualização total”.

Abra as ferramentas de desenvolvimento e navegue até a guia “Rede”. Em seguida, clique em “desativar cache” e faça uma “atualização forçada”:

Aceleração e velocidade do cache

Agora, enquanto você navega pelas páginas com o DevTools aberto, não haverá recursos em cache do seu navegador. As páginas carregam mais devagar à medida que os recursos são carregados todas as vezes, mas você verá as mudanças. Geralmente, os desenvolvedores mantêm “Desativar Cache” ATIVADO por padrão e apenas o desabilitam ao testar interações reais do usuário quando os tempos de carregamento são importantes.

.Cache, acelerador e velocidade 1

Na mesma guia, depois de atualizar uma vez, você também verá as medidas da velocidade e do peso da página. Quanto tempo até o “Carregar” ser acionado (evento quando outros scripts são anexados para fazer mais trabalho), quantos arquivos são solicitados (31 solicitações acima, quantidade razoável), quanto foi baixado e assim por diante. É simples, quanto menor melhor para cada valor. Qualquer coisa acima de 100-150 solicitações e você começará a ver grandes problemas de velocidade.

DevTools também fornece uma simulação de conexão lenta. Um recurso muito útil para ver como seu site funcionaria em uma rede mais lenta como o 3G. Para ativá-lo, basta alterar o valor ao lado de “Desativar cache” e clicar em atualizar. Quando você atualizar, verá cada etapa do carregamento do site. Com o cache desativado, esta seria a primeira visita para usos regulares.

Cache Throttle and Speed ​​2

Veja a diferença na velocidade quando selecionamos “3G lento” e atualizamos em comparação com o primeiro exemplo que usa a velocidade de conexão real. Aqui você também pode testar “Offline” - como o site funcionaria sem qualquer conexão com a internet. Se isso soa estranho, não é, apps progressivos da web já permitem que sites funcionem mesmo sem conexão com a internet se eles tiverem sido acessados ​​pelo menos uma vez pelos visitantes.

As auditorias são outro ótimo recurso que fornece uma análise de velocidade amigável de uma página. Você pode simplesmente executá-lo acessando as guias "Auditorias" e clicando em "Gerar relatório":

.Cache, acelerador e velocidade 3
À direita, você tem algumas opções para decidir o que deve ser testado, pois às vezes os testes podem demorar um pouco (um ou dois minutos), então se você executá-los muitas vezes, poderá escolher apenas o que é necessário para o teste atual . Aqui está um resultado de amostra com as opções acima para a tela inicial do Google:

Cache, Throttle e Speed ​​4

Uma ótima pontuação! 94 é muito bom e mostra o excelente trabalho colocado nesta página. Lembre-se de que pode parecer muito simples na superfície, mas há uma tonelada de scripts em execução em segundo plano que permanecem ocultos e tornam os sites lentos. Existem muitas outras métricas testadas e você pode fazer isso em qualquer site para descobrir quais problemas existem e o que pode ser melhorado.

Relacionado : O que realmente significa “acelerar o seu site” e como consegui-lo?

DevTools Console

A visão final que abordaremos é o console. Facilmente acessado simplesmente pressionando a tecla ESC ou indo para a guia “Console”. Como esperado, não há erros, apenas alguns avisos que não devem causar muitos problemas:

DevTools Console

Mas, se por algum motivo após uma atualização recente em seu site, um componente interativo (como uma lista suspensa, menu, mapa, formulário) parar de funcionar, você pode sempre dar uma olhada no console. Pode haver erros que digam qual é o motivo.

Aqui está um exemplo de como esse erro seria:

DevTools Console 2

É um pouco irônico usar a página de documentação de logs de erros para mostrar os erros, certo? Em qualquer caso, serve a um bom propósito. Esses são erros que impediriam o funcionamento de algum recurso. Você sempre pode compartilhar essas informações com seus desenvolvedores e pedir ajuda. Os logs são postados ao vivo conforme você interage com a página, portanto, se você clicar em um botão e um erro aparecer, provavelmente o script por trás dele está com problemas.

Relacionado : O caminho para se tornar um bom web designer

Aviso de segurança : não é uma boa ideia copiar e colar o código no console sem entender o que ele faz. Especialmente se for de uma fonte não confiável e usado em aplicativos / sites internos da sua empresa. O Facebook postou um aviso sobre isso em seu console:

DevTools Console 3

Resumo

DevTools é uma ferramenta incrível que auxilia desenvolvedores e proprietários de sites. Fornece tudo o que você precisa para ajustar e modificar uma página. Através dele você pode alterar CSS, modificar HTML, deletar e reorganizar elementos da página, ver relatórios de velocidade e erros reportados.

Os proprietários de sites podem usá-lo para apresentar aos desenvolvedores ideias e exemplos de suas necessidades que podem ser mais fáceis de entender do que escrever parágrafos de texto. Com algum conhecimento de CSS das propriedades básicas, você pode ser muito mais descritivo de suas necessidades, o que reduzirá muito o tempo gasto em novas alterações.

Há muitos outros recursos esperando para serem usados, não tenha medo de explorar!

DevriX WordPress Development Retainers

Desenvolvimento de longo prazo, suporte e inovação para sua plataforma WordPress. DevriX oferece parceria técnica para PMEs e startups em ritmo acelerado. Construímos soluções WordPress e escalamos plataformas gerando até 20 milhões de visualizações de página por mês.

Vamos trabalhar.