Tudo o que você precisa saber sobre o console do desenvolvedor

Bom profissional conhece suas ferramentas. Uma das principais ferramentas que os desenvolvedores do WordPress têm à nossa disposição é o console de desenvolvedor JavaScript incluído em nossos navegadores. Neste post, veremos tudo o que você precisa saber sobre o console do desenvolvedor do navegador, além de alguns truques e curiosidades que, talvez, você não conhecia.

Como acessar o console do desenvolvedor

Primeiras coisas primeiro: vamos ver como você pode abrir o console do desenvolvedor do seu navegador. Se você é usuário do Firefox, basta clicar no menu (canto superior direito) e procurar a opção Desenvolvedor Web , como você pode ver abaixo:

Em seguida, selecione Console da Web :

e o console aparecerá no seu navegador, como você pode ver na captura de tela a seguir. Lembre-se que é possível configurar onde você quer que o painel apareça exatamente. Você pode até configurá-lo para aparecer em uma janela separada (o que é bastante útil se você estiver usando vários monitores).

Se, por outro lado, você for um usuário do Chrome, o procedimento é muito semelhante. Basta acessar seu menu, selecionar Mais Ferramentas e depois Ferramentas do Desenvolvedor :

Como usar o console do desenvolvedor

O console JavaScript do nosso navegador é extremamente útil para depurar nosso código, ver o que nossos scripts estão registrando, executar pequenos comandos e ver seus efeitos na web em tempo real. Como desenvolvedor de plugins para WordPress, o principal utilitário que o console tem para mim é obviamente o debug, então vamos ver em detalhes o que ele oferece com precisão.

N.º 1 Diferentes Níveis de Log

A primeira razão pela qual um desenvolvedor geralmente abre o console JavaScript é para depurar seu código. Quando ocorre um erro ou algo está falhando, você provavelmente encontrará algumas informações sobre isso no console. Você pode até mesmo lançar suas próprias mensagens informativas, avisos ou erros quando quiser!

Na captura de tela anterior, por exemplo, vemos que o objeto console (objeto global cujo objetivo é nos ajudar a depurar o código) possui métodos diferentes para escrever mensagens no console:

• debug e log mostram mensagens simples.
• info mostra mensagens de informação. No Firefox, eles mostram um ícone de “informações” ao lado da mensagem.
• warn mostra avisos, geralmente apontando um problema ou algo que não está certo. Geralmente é destacado em amarelo e com um ícone de aviso.
• error é geralmente reservado para os erros mais graves (ou seja, coisas que realmente falharam). Ele é mostrado em vermelho e também imprime um rastreamento de pilha (ou seja, qual função gerou o erro e todos os seus chamadores).

A vantagem de usar diferentes níveis de log é que podemos escolher a qualquer momento quais mensagens queremos que sejam exibidas. Por exemplo, na captura de tela a seguir, desativamos as mensagens Info e Debug :

#2 Monitorando os tempos de execução

Em ágil, muitas vezes você ouvirá isso: “faça funcionar, faça bem, faça rápido”. Depois de escrever algum código “para fazê-lo funcionar”, não é improvável que o resultado seja lento e ineficiente. Quando isso acontece, é importante identificar onde estão os gargalos e resolvê-los.

Embora existam ferramentas como profilers para encontrar os culpados e entender exatamente o que está acontecendo nos bastidores com grande detalhe, às vezes queremos uma solução “rápida e suja”. Ou seja, simplesmente queremos identificar a função mais lenta em nosso código… e temporizadores simples são ótimos nessa tarefa!

Se você quiser saber quanto tempo um determinado trecho de código leva para ser executado, inicie um cronômetro no início do código ( console.time ) e pare-o ( console.timeEnd ) quando seu código terminar:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Quando o código atingir o timeEnd , você verá o tempo que levou para ser executado:

 Timer: 655ms - timer ended

Observe que quando iniciamos e paramos um cronômetro, damos um nome a ele (no meu exemplo, “Timer”). Isso porque podemos criar quantos contadores quisermos, cada um com seu próprio nome, e executá-los todos de uma vez.

# 3 Contadores Automáticos

Se você estiver interessado em controlar o número de execuções de qualquer função em seu código ou registrar o número de vezes que um loop é executado, use console.count . Cada vez que a função for executada, você receberá um novo log em seu console com o valor atual do contador:

#4 Como formatar seus registros

Os logs estão aqui para nos ajudar a entender o que está acontecendo com nosso código. Mas isso só é possível se escrevermos logs que possamos entender mais tarde…

Strings de texto

No início deste post, falei brevemente sobre todos os métodos de log que o console possui. Os exemplos que compartilhei imprimiram algum texto simples. Ou seja, esta afirmação:

 console.log( 'Hello world!' );

imprimi este texto:

 Hello world!

E se quisermos imprimir um objeto em vez disso? Bem, isso:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

torna-se isto:

Mas e se quisermos registrar várias coisas? Temos que usar várias chamadas para console.log ? Bem, a resposta é não, não é necessário. Podemos registrar tudo o que queremos com uma única chamada:

Agrupando registros…

Quando começamos a ter muitos logs em nosso código (como, por exemplo, aqui):

o resultado pode acabar sendo um pouco confuso porque todos os logs são mesclados em um único fluxo de texto:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Felizmente, o objeto console oferece alguns métodos para resolver esse problema: group e groupEnd . Com eles, podemos agrupar nossas mensagens de log. Basta criar os grupos (por exemplo, um grupo por função):

e eles vão aparecer assim:

Tabelas

Quando trabalhamos com coletas de dados, nem sempre é fácil visualizá-las. Por exemplo, imagine que temos uma lista de itens como o seguinte:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Se nós os console.log , é isso que obtemos:

o que é mais ou menos OK, até que tenhamos mais objetos com mais campos cada. Ao enfrentar esse tipo de estrutura de dados, recomendo que você use console.table para registrá-lo:

#5 Como exibir corretamente tipos complexos (objetos e matrizes)

Por fim, gostaria de encerrar o post de hoje com algo que poucos desenvolvedores conhecem... Digamos, por exemplo, que você esteja trabalhando em um projeto e queira ver qual é o valor de um objeto antes e depois de atualizá-lo. Para fazer isso, é provável que você console.log a variável antes de fazer a alteração e depois, como você vê no GIF a seguir:

No exemplo anterior, registramos um objeto que contém um valor definido como 1. Em seguida, atualizamos o valor para 200 e registramos o objeto novamente. Seria de esperar que o primeiro log sempre mostrasse o valor original (1), mas observe como, quando expandimos o objeto, ele realmente mostra o novo valor 200. O que está acontecendo?

Basicamente, uma mensagem de log tem uma referência ao objeto e, portanto, quando a expandimos, ela nos mostra o objeto como está agora e não como era quando o log foi feito. Maldita mutabilidade!

Para resolver esse problema, basta enviar uma cópia para o log (bibliotecas como lodash e seu método cloneDeep facilitam muito isso). Dessa forma, o primeiro objeto logado será uma cópia que não pode ser alterada (porque você não terá uma referência a ele):

E isso é tudo por hoje! Espero que tenha gostado deste post. Se você quiser mais informações sobre tudo o que pode fazer com o console , confira a documentação no MDN. Não se esqueça de compartilhar com seus amigos? E se você fizer algo diferente ou tiver algum conselho para compartilhar com nossos leitores, deixe-nos um comentário?

Imagem destacada do Tim van der Kuip no Unsplash.