5 ferramentas úteis no Chrome DevTools

Se você possui um blog, provavelmente já teve vontade de fazer textos com fundos e imagens diferentes, certo? E, convenhamos, nem todos sabem a programação básica em código HTML. Então, para muitos, essa vontade não passa de um sonho. Mas isso acaba agora! Com o Chrome DevTools é possível fazer esse tipo de trabalho, sem tomar tempo dos colegas desenvolvedores.

O DevTools possui um conjunto de ferramentas para interagir com a web. Qualquer um que trabalhe com web analysis deve ter uma boa noção de como usar o DevTools. Mas, mais que isso, qualquer um que trabalhe com a Web deve ter um conhecimento básico dessa ferramenta. Quer você faça marketing, gerenciamento de produtos ou desenvolvimento de negócios, o DevTools pode melhorar muito seu produto final.

O Chrome DevTools têm muitos usos, mas, para quem não é desenvolvedor web, os mais comuns são:

1# Investigar os concorrentes
2# Desfazer os bugs
3# Ver os diferentes tipos de visualizações
4# Conferir o tempo de carregamento das páginas
5# Editar na web

O que são as Chrome DevTools?

Existem algumas maneiras de acessar o DevTools. Você pode optar pelo atalho (F12, Cmd + Shift + C) ou clicar com o botão direito na página e selecionar “inspecionar”. Qualquer uma dessas opções abrirá um painel à direita, que é uma janela para a Web com a qual você interage.

Essa janela nada mais é que o ambiente DevTools. Ela é composta de várias ferramentas diferentes divididas em várias seções. As seções mais importantes são:

• Elementos: de que é feita a página?
• Console: seu portal para interagir com a página.
• Rede: o que está acontecendo em segundo plano?
• Aplicação: Explore cookies e muito mais.

Essas seções podem ser exploradas a partir dos 5 tópicos mencionados acima.

1# Investigar os concorrentes

Investigar os concorrentes é valioso para qualquer negócio. Com o DevTools, você pode explorar os artifícios que eles estão utilizando em suas páginas web. Isso pode te orientar sobre qual direção eles estão indo, e como sua empresa pode inovar em relação a isso.

Por exemplo, usando a seção Elementos, é possível ver o código de qualquer site. Ao pesquisar termos como Google Analytics ou Optimizely, você pode ver quais ferramentas os concorrentes estão usando.

Aliás, você pode ver muito mais que as tecnologias que as empresas utilizam. Ou seja, você pode combinar informações da guia Elementos com informações que estão sendo enviadas pelo site na guia Rede. Essas informações combinadas podem ser úteis para qualquer empresa que queira ter uma vantagem competitiva.

2# Desfazer os bugs

Quantas vezes você já quis implementar um novo elemento no seu site e descobriu que não estava funcionando perfeitamente? Muitas vezes, há problemas de exibição e erros de desempenho. Ao usar o DevTools, é possível desfazer os bugs básicos rapidamente e economizar o tempo da sua equipe.

A guia Console no DevTools relata qualquer erro que surgir durante o carregamento ou operações de uma página. Por exemplo, você pode ter implementado uma ferramenta de terceiros que permite a exibição de notificações pop-up, mas, por algum motivo, ela não é carregada na página. Ou seja, se você tiver conhecimento técnico, poderá até mesmo solucionar os bugs, já que identificou a causa do problema.

Outra área importante para solução de problemas é a guia Aplicativo. Nela, você pode ver todos os cookies associados ao site atual. Isso pode ser muito útil se você estiver usando uma ferramenta de teste AB, como VWO. Isso porque ela pode editar o cookie para forçar manualmente uma variação diferente.

3# Ver os diferentes tipos de visualizações

Uma ferramenta útil no Chrome DevTools é a capacidade de alterar sua visualização para modos já definidos. Isso porque, ao trabalhar com um website, devemos ter em mente que nem todos o visualizam em uma tela como a nossa. Ao realizar análises ou decidir sobre alterações no produto, é importante considerar sempre como os usuários em dispositivos diferentes percebem as coisas de maneira diferente devido ao tamanho da tela.

Usando o DevTools, é possível alternar rapidamente entre as visualizações sem o incômodo de redimensionar a tela, com a vantagem adicional de poder ver a exibição de dispositivos específicos. Isso ajuda a captar rapidamente os problemas de exibição ou descobrir possíveis melhorias.

4# Conferir o tempo de carregamento das páginas

O  Chrome DevTools também pode ser usado para investigar os tempos de carregamento da página.

Quando um usuário acessa um site, há muitas informações que devem ser carregadas, como layouts, imagens etc. Não é preciso dizer que o processo de decisão de como cada uma dessas partes é carregada é muito complexo. Ao trabalhar em um escritório com uma conexão de internet de alta velocidade, é raro ver problemas. Entretanto, isso pode ser diferente para usuários com conexão de internet móvel ou ruim.

Usando a guia “Rede”, é possível fazer duas coisas:

• Acelerar a velocidade de conexão

Acelerar a velocidade de conexão significa simular conexões de internet. Ele efetivamente imita o que é ter uma conexão diferente.

• Ver a linha do tempo para o carregamento da página

Uma vez acelerado, é fácil ver que nem tudo é carregado de uma só vez, como você poderia esperar de usar uma conexão de alta velocidade. Para ver a ordem exata, a Linha do Tempo mostra instantâneos da página em diferentes pontos no tempo de carregamento. Pode ser criado simplesmente atualizando a página depois de abrir a guia Rede. Armado com uma compreensão dos tempos de carga, é possível começar a melhorar a experiência do usuário.

5# Editar na Web

Por fim, podemos usar o Chrome DevTools para editar a web no modo como a vemos. Usando a guia “Elementos”, é possível interagir com os elementos da página e alterá-los, se for conveniente. Ou seja, se você clicar com o botão direito do mouse em qualquer item da página e clicar em Inspecionar, ele abrirá essa seção em elementos. Então, aparecerão todas as propriedades CSS do item selecionado.

As alterações podem ser em relação à cor, espaçamento, texto, imagens e até mesmo tamanho da fonte.

A maioria das coisas que podem ser alteradas por uma equipe de desenvolvimento também podem ser alteradas por você.