Coisas que você provavelmente não sabia que poderia fazer com o console do desenvolvedor do Chrome

O Chrome vem com ferramentas de desenvolvedor internas. Isso vem com uma ampla variedade de recursos, como Elementos, Rede e Segurança. Hoje, nos concentraremos 100% em seu console JavaScript.

Quando comecei a codificar, usei apenas o console JavaScript para registrar valores como respostas do servidor ou o valor das variáveis. Mas com o tempo, e com a ajuda de tutoriais, descobri que o console pode fazer muito mais do que eu imaginava.

Aqui estão coisas úteis que você pode fazer com isso. Se você está lendo isso no Chrome (ou em qualquer outro navegador) em uma área de trabalho, você pode até mesmo abrir suas Ferramentas de Desenvolvedor e testá-las imediatamente.

1. Selecione Elementos DOM

Se você estiver familiarizado com o jQuery, você sabe como os seletores $ ('. Class') e $ ('id id') são importantes. Eles selecionam os elementos DOM, dependendo da classe ou do ID associado a eles.

Mas quando você não tem acesso ao jQuery no DOM, você ainda pode fazer o mesmo no console do desenvolvedor.

$ ('tagName') $ ('. class') $ ('# id') e $ ('. class #id') são equivalentes ao document.querySelector (''). Isso retorna o primeiro elemento no DOM que corresponde ao seletor.

Você pode usar $$ ('tagName') ou $$ ('. Class') – observe os cifrões duplos – para selecionar todos os elementos do DOM, dependendo de um determinado seletor. Isso também os coloca em uma matriz. Você pode ir adiante e selecionar um elemento específico entre eles, especificando a posição desse elemento na matriz.

Por exemplo, $$ ('. ClassName') fornecerá todos os elementos que possuem a classe className e $$ ('. ClassName') [0] e $$ ('. ClassName') [1]. o primeiro e o segundo elemento respectivamente.

2. Converta seu navegador em um editor

Quantas vezes você já se perguntou se poderia editar algum texto no próprio navegador? A resposta é sim, você pode converter seu navegador em um editor de texto. Você pode adicionar texto e remover texto de qualquer lugar no DOM.

Você não precisa inspecionar o elemento e editar o HTML mais. Em vez disso, vá para o console do desenvolvedor e digite o seguinte:

 document.body.contentEditable = true 

Isso tornará o conteúdo editável. Agora você pode editar quase tudo e qualquer coisa no DOM.

3. Encontrar eventos associados a um elemento no DOM

Durante a depuração, você deve estar interessado em encontrar os ouvintes de eventos vinculados a um elemento no DOM. O console do desenvolvedor facilita a localização desses.

getEventListeners ($ ('selector')) retorna uma matriz de objetos que contém todos os eventos ligados a esse elemento. Você pode expandir o objeto para ver os eventos:

Para encontrar o ouvinte de um determinado evento, você pode fazer algo parecido com isto:

 getEventListeners ($ ('selector')). eventName [0] .listener 

Isto irá mostrar o ouvinte associado a um evento específico. Aqui eventName [0] é uma matriz que lista todos os eventos de um determinado evento. Por exemplo:

 getEventListeners ($ ('firstName')). clique [0] .listener 

… Exibirá o listener associado ao evento click do elemento com o ID 'firstName'.

4. Monitorar Eventos

Se você quiser monitorar os eventos ligados a um elemento específico no DOM enquanto eles são executados, você também pode fazê-lo no console. Existem diferentes comandos que você pode usar para monitorar alguns ou todos esses eventos:

  • O monitorEvents ($ ('selector')) irá monitorar todos os eventos associados ao elemento com o seu seletor, e depois os registrará no console assim que forem disparados. Por exemplo, monitorEvents ($ ('# firstName')) registrará todos os eventos ligados ao elemento com o ID 'firstName'.
  • monitorEvents ($ ('selector'), 'eventName') registrará um determinado evento vinculado a um elemento. Você pode passar o nome do evento como um argumento para a função. Isso registrará apenas um evento específico ligado a um elemento específico. Por exemplo, monitorEvents ($ ('# firstName'), 'click') registrará todos os eventos de clique associados ao elemento com o ID 'firstName'.
  • monitorEvents ($ ('selector'), ['eventName1', 'eventName3',….]) registrará vários eventos, dependendo de seus próprios requisitos. Em vez de passar um único nome de evento como um argumento, passe um array de strings que contém todos os eventos. Por exemplo, monitorEvents ($ ('# firstName'), ['click', 'focus']) registrará o evento click e os eventos de foco ligados ao elemento com o ID 'firstName'.
  • unmonitorEvents ($ ('selector')): Isso interromperá o monitoramento e o registro dos eventos no console.

5. Encontre o tempo de execução de um bloco de código

O console JavaScript possui uma função essencial chamada console.time ('labelName'), que usa um nome de rótulo como argumento e, em seguida, inicia o cronômetro. Há outra função essencial chamada console.timeEnd ('labelName'), que também usa um nome de rótulo e termina o temporizador associado a esse rótulo específico.

Por exemplo:

 console.time ('myTime'); // Inicia o temporizador com label - myTime 
console.timeEnd ('myTime'); // Termina o temporizador com Label - myTime

// Output: myTime: 123.00 ms

As duas linhas de código acima nos dão o tempo necessário para iniciar o temporizador até o final do temporizador.

Podemos melhorar isso para calcular o tempo gasto para executar um bloco de código.

Por exemplo, digamos que eu queira encontrar o tempo necessário para a execução de um loop. Eu posso fazer assim:

 console.time ('myTime'); // Inicia o temporizador com label - myTime 

para (var i = 0; i <100000; i ++) {
2 + 4 + 5;
}

console.timeEnd ('mytime'); // Termina o temporizador com Label - myTime

// Output - myTime: 12345.00 ms

6. Organize os valores de uma variável em uma tabela

Digamos que temos uma matriz de objetos que se parece com o seguinte:

 var myArray = [{a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3, d: 4}, {k: 11, f: 22}, {a: 1 b: 2, c: 3}] 

Quando digitamos o nome da variável no console, ele nos fornece os valores na forma de uma matriz de objetos. Isso é muito útil. Você pode expandir os objetos e ver os valores.

Mas isso fica difícil de entender quando as propriedades aumentam. Portanto, para obter uma representação clara da variável, podemos exibi-los em uma tabela.

console.table (variableName) representa a variável e todas as suas propriedades em uma estrutura tabular. Aqui está o que isso parece:

7. Inspecione um elemento no DOM

Você pode inspecionar diretamente um elemento do console:

  • inspect ($ ('selector')) inspeciona o elemento que corresponde ao seletor e leva você para a guia Elementos nas Ferramentas do desenvolvedor do Google Chrome. Por exemplo, inspecionar ($ ('# firstName')) irá inspecionar o elemento com o ID 'firstName' e inspecionar ($ ('a') [3]) irá inspecionar o quarto elemento âncora que você possui no seu DOM.
  • $ 0, $ 1, $ 2, etc. podem ajudá-lo a pegar os elementos recentemente inspecionados. Por exemplo, $ 0 lhe dá o último elemento DOM inspecionado, enquanto $ 1 lhe dá o segundo último elemento DOM inspecionado.

8. Listar as propriedades de um elemento

Se você quiser listar todas as propriedades de um elemento, você pode fazer isso diretamente no console.

dir ($ ('selector')) retorna um objeto com todas as propriedades associadas ao seu elemento DOM. Você pode expandi-los para visualizá-los com mais detalhes.

9. Recupere o valor do seu último resultado

Você pode usar o console como uma calculadora. E quando você fizer isso, talvez seja necessário acompanhar um cálculo com um segundo. Veja como recuperar o resultado de um cálculo anterior da memória:

 $ _ 

Aqui está o que isso parece:

 2 + 3 + 4 
9 // - A resposta da soma é 9

$ _
9 // Dá o último resultado

$ _ * $ _
81 // Como o último resultado foi 9

Math.sqrt ($ _)
9 // Como o último resultado foi 81

$ _
9 // Como o último resultado é 9

10. Limpar o console e a memória

Se você deseja limpar o console e sua memória, basta digitar:

 Claro() 

Em seguida, pressione enter. Isso é tudo que existe para isso.