Coisas sobre o console do seu navegador que vão mudar a sua vida

CodePrestigeum e-book produzido por:

Agradecimentos

Diego Martins de PinhoCofundador da Code Prestige

Seja muito bem-vindo!

Os navegadores atuais possuem uma série de funcionalidades que facilitam as nossas vidas como desenvolvedores. Entretanto, poucos conhecem o seu verdadeiro poder. Neste e-book, te mostraremos alguns dos truques mais fantásticos e pouco explorados nos navegadores da atualidade. Tenho certeza de que você irá se impressionar!

Agora sem mais delongas, boa leitura e bons códigos!

Sumário

● Exibir Mensagens● Arrays● Agrupamento de mensagens● Métricas● Construção de Strings● Edição de Páginas● Testes● Limpeza● Monitoramento de eventos● Capturar eventos● Referências

Vamos falar sobre o console

O console do navegador é uma ótima ferramenta que nos ajuda diariamente com:

● Debug do código (o famoso print “passei por aqui”)● Executar js on the fly● Observar mensagens de erro/warnings do seu programa

e/ou navegador● Etc

Mas o console vai muito além disso… Vamos dar uma olhada no que podemos fazer com ele.

CodePrestige - Ensino de programação | 01

Exibir mensagens

Geralmente utilizamos a função log() para exibir mensagens no console. Mas na verdade há outras maneiras que podem ser mais adequadas. Temos outras três funções para exibir mensagens no console:

1. info()

2. warn()

3. error()

Elas funcionam de forma semelhante, a diferença está na forma como são exibidas no navegador.

CodePrestige - Ensino de programação | 02

Exibir mensagensPara cada tipo de mensagem, temos uma visualização diferente:

Atenção!

Para cada navegador, o texto é formatado de maneira diferente. Neste e-book, usaremos a visualização gerada pelo Google Chrome.

CodePrestige - Ensino de programação | 03

Exemplo:

Arrays

Leve em conta este array de filmes:

var filmes = [ {titulo: 'Mulher Maravilha', produtora: 'Warner Bros.'}, {titulo: 'Homem Aranha', produtora: 'Marvel'}, {titulo: 'Esquadrão Suicida', produtora: 'Warner Bros.'}, {titulo: 'Deadpool', produtora: '20th Century Fox'},];

Como poderíamos fazer pra ver os valores desse array no console? console.log(filmes) funcionaria, certo? Mas será que não tem um jeito melhor?

CodePrestige - Ensino de programação | 04

Exibindo arrays no consolePara exibir os itens de uma lista com vários objetos, podemos fazer uso da função table() do console. O navegador automaticamente irá montar uma tabela onde as propriedades são os valores das colunas:

CodePrestige - Ensino de programação | 05

Exemplo:

Agrupamento de mensagens

Dependendo do número de mensagens que estamos exibindo durante a execução dos nossos programas, o console pode ficar uma bagunça.

Às vezes queremos agrupar as nossas mensagens para que seja mais fácil encontrá-las quando foram exibidas no console.

Podemos fazer isso através da função group().

CodePrestige - Ensino de programação | 06

Agrupamento de mensagens

Exemplo:

Também podemos usar a função groupCollapsed(). Neste caso, o próprio nome diz, o grupo vem fechado.

CodePrestige - Ensino de programação | 07

Métricas

Quando queremos medir o tempo que o nossa função leva para ser executada, o que normalmente fazemos? Normalmente algo parecido com isso...

CodePrestige - Ensino de programação | 08

Exemplo:

MétricasUma alternativa interessante é usar o método time() do console.

CodePrestige - Ensino de programação | 09

Exemplo:

Construção de Strings

Por vezes temos a necessidade de unir várias informações em uma única String, como por exemplo:

Isso funciona ok, mas podemos otimizar um dos passos...

Exemplo:

CodePrestige - Ensino de programação | 10

Construção de StringsPodemos usar templates literais diretamente na função log (e seus derivados):

Exemplo:

CodePrestige - Ensino de programação | 11

Edição de páginasO console é ótimo para conseguirmos alterar o conteúdo de um site on the fly.

alteração feita por meio de inspecionamento do elemento

CodePrestige - Ensino de programação | 12

Exemplo:

Edição de páginasÉ possível alterar o conteúdo diretamente no site sem a inspeção de elementos utilizando o comando:

document.body.contentEditable=true

Com isso, já é possível alterar o conteúdo diretamente na página, sem a necessidade do console.

CodePrestige - Ensino de programação | 13

TestesExistem mais alguns métodos interessantes. Um deles é o Assert. Podemos utilizá-lo para fazer alguma validação no código:

Exemplo:

CodePrestige - Ensino de programação | 14

LimpezaDepois de muito tempo utilizando o console, ele começa a ficar com informações demais.

Para limpá-lo, há 3 opções:

1. Botão “limpar”2. método clear()3. Ctrl + L

CodePrestige - Ensino de programação | 15

Monitoramento de eventosTambém podemos utilizar o console para monitorar eventos. Como por exemplo, o clique em um botão.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Teste</title></head><body> <button id="botao" type="button">Botão da alegria</button></body></html>

CodePrestige - Ensino de programação | 16

Monitoramento de eventos

Há várias maneiras de monitorar:

1. monitorEvents($(‘selector’))2. monitorEvents($(‘selector’),’eventName’)3. monitorEvents($(‘selector’),[‘eventName1’, ….])

Para qualquer um deles, podemos desabilitar o monitoramento com o método unmonitorEvents($(‘selector’))

CodePrestige - Ensino de programação | 17

Capturar eventos

Se não soubermos de antemão os eventos associados à um elemento, podemos usar o método getEventListeners() para descobrir!

CodePrestige - Ensino de programação | 18

Exemplo:

Referências

Esta apresentação é baseada na série de artigos “Você conhece o verdadeiro poder do console do seu navegador?” publicado na nossa publicação do Medium.

1. https://medium.com/code-prestige/console-navegador-3f2434124eaf

2. https://medium.com/code-prestige/voc%C3%AA-conhece-o-verdadeiro-poder-do-console-do-seu-navegador-parte-2-efaa540c148

CodePrestige - Ensino de programação | 19

/CodePrestige

Confira outros e-books, vídeos e cursos nas nossas redes sociais!

E-book produzido em 18/12/2017. © 2017 Code Prestige. Todos os direitos reservados.