Wtricks • Tutoriais e Dicas do Mundo Digital

Dicas e truques do Console para Desenvolvedores do Google Chrome

O Google Chrome oferece uma uma grande quantidade de recursos incríveis para te ajudar a construir suas aplicações web.

Anteriormente aqui na Wtricks eu disponibilizei um tutorial em vídeo muito interessante que mostrava como usar o console do navegador como ferramenta no Desenvolvimento Web. Hoje, como um complemento ao tutorial, fiz a tradução livre e a adaptação do artigo do site flaviocopes.com, que mostra uma lista super interessantes de truques e dicas do Google Chrome que vão facilitar sua vida como desenvolvedor.

Como eu disse anteriormente, esse artigo é uma tradução livre e uma adaptada, então é possível que eu tenha incluído, retirado ou até mesmo reescrito por completo e com minhas palavras, partes do conteúdo do artigo original. Caso queira ler o mesmo na integra, é só clicar aqui.

E antes de começarmos de fato as dicas, caso você tenha caído nesse tutorial de paraquedas e não saiba como abrir o console do navegado: no MacOS é só você pressionar “command + option + j” ou no Windows “ctrl + shift + j”. Agora sim, vamos as dicas! 

Arrastar e soltar (Drag and Drop) elementos do site

No painel de elementos do console do Google Chrome, você pode arrastar e soltar qualquer elemento do código, mudando assim sua posição em tempo real.

Criar uma referência do elemento atualmente selecionado no console

Para usar um elemento como referência no console, basta selecionar qualquer parte do DOM e então escrever “$0” no console. Caso você esteja usando jQuery você pode usar o comando “$($0)” para acessar a API do jQuery no elemento selecionado.

Console Google Chrome

Usar o valor do resultado da ultima operação feita no console

Use “$_” para referenciar o valor de retorno da ultima operação executada no console.

Console Google Chrome

Adicionar CSS e mudar o estado dos elementos

No painel elementos existe dois botões super úteis para que você possa alterar os estilos do site direto pelo navegador.

O primeiro botão é o símbolo de “+”, ele permite que você adicione novas propriedades do CSS, em qualquer seletor e também faz o pré-preenchimento do elemento atualmente selecionado.

Console Google Chrome

O segundo, permite que você altere o estado atual de um elemento, então você pode aplicar os diversos tipos de estilos possíveis para esses elementos enquanto estão, por exemplo, ativos (:active), em foco (:focus), entre outros.

Console Google Chrome

Encontrar a onde o CSS está definido

Usando o comando “command + clique (esquerdo)” ou “ctrl + clique (esquerdo)” no Windows, você pode facilmente ir diretamente para o local no arquivo que o código CSS do elemento selecionado foi definido.

Console Google Chrome

Salvar em um arquivo CSS os elementos modificados

Essa dica tem uma pequena limitação, ela não funciona com a dica mostrada acima, de adicionar um novo elemento CSS usando o botão “+” no painel de elementos. E sim, somente, para os elementos que já existiam na folha de estilo modificada.

Então para usar esse truque, é só clicar no nome da folha de estilo que você modificou, o editor vai abrir a mesma no painel “sources”, então, por lá, clicando com o lado direito no nome do arquivo, você pode salvar o mesmo.

Console Google Chrome

Captura de tela de um único elemento ou da página inteira

Para fazer a captura de um elemento especifico, você pode selecionar o elemento que quer capturar, depois abrir o menu de comandos apertado “command + shifit + p” ou “ctrl + shift + p” no Windows. Depois é  só digitar o comando “Capture node screenshot”, como mostrado na imagem abaixo.

Você também pode usar o mesmo painel de comandos para capturar a tela inteira, basta usar o comando “Capture Full Size Screenshot”.

Obs: quando fizer uma captura da tela inteira, o Chrome vai dar uma “pensadinha” como se estivesse travado, mas é só esperar uns segundos que ele volta ao normal.

Encontrar um elemento usando os seletores CSS

Você pode abrir a caixa de pesquisa usando o comando “command + f” ou “ctrl + f” no Windows.

Depois de aberta a caixa de pesquisa, você pode procurar por qualquer elemento do código fonte, usando texto ou então os seletores CSS. Além disso, quando fizer a pesquisa usando seletores, o Chrome vai respeita a hierarquia dos elementos, então se pesquisar por “.container .row .col” ele vai pesquisar por uma “.col” que esteja dentro de uma “.row” e que, por sua vez, seja filha de um “.container”.

Console Google Chrome

Escrever comando em mais de uma linha no console

Para escrever um comando em mais de uma linha no console, você pode pressionar “shift + enter” e continuar digitando na próxima linha. Quando tiver finalizado o comando, basta pressionar “enter” novamente.

Console Google Chrome

Limpar os comandos do console

Você pode limpar o console usando o comando “command + k” ou “ctrl + l” no windows ou então, se preferir, você pode usar o botão “Clear Console”  localizado na barra superior.

Go To…

Para quem usa Sublime Text 3 ou o Visual Studio Code, provavelmente está bem familiarizado com o conceito dessa função. Com ela, você pode ir para qualquer parte do código fonte da sua aplicação, diretamente do console.

São três comando separados:

– Com o comando “command + o” ou “ctrl + o” no windows, você vai ver uma lista com todos os arquivos carregados pelo seu site.

– Usando o comando “command + shift + o” ou “ctrl + shift + o” no windows, você pode ir diretamente para uma parte específica, para isso, basta digitar o que você está procurando logo após o símbolo de “@“.

– Por fim, você também pode usar o comando “ctrl + g”, exclusivo para windows (Não achei uma alternativa no MacOS) para ir direto para uma linha do código.

Console Google Chrome

Assistir uma expressão ou variáveis

Em vez de escrever repetidamente uma variável ou uma expressão que você irá verificar várias vezes durante uma sessão de depuração, você pode simplesmente colocar essas expressões ou variáveis em uma lista, e verificar as mudanças de estados delas mais facilmente.

Console Google Chrome

O que achou das dicas? Conheçe alguma outra dica ou truque que não foi mencionado aqui? Deixe nos comentários!

PARTICIPE DA DISCUSSÃO