Publicado em: 06/Nov/2019
Atualizado em: 21/Nov/2019

Javascript - console.dir

Considere o seguinte página:

1<html>
2  <head></head>
3  <body>
4    <input id="clickMe" type="button" value="Clique aqui">
5  </body>
6</html>

Que quando aberta no navegador tem a seguinte aparência:

img
img

Para obter o elemento do botão poderiamos fazer o seguinte:

1var btn = document.getElementById( 'clickMe' );

Agora que temos o objeto botão armazenado em uma variável chamada btn podemos obter mais informações.

Ao enviar a variável btn para a função console.log veremos a seguinte representação:

1console.log( btn )
2<input id="clickMe" type="button" value="Clique aqui">

Ao enviar a variável btn para a função console.dir teremos acesso a todas as propriedades internas do objeto.

1console.dir( btn )
img
img

A lista de propriedades é muito longa, abaixo vemos um trecho com as funções que tratam eventos (cliques, drag, change, …)

img
img

Adicionado um evento de clique

1// Definindo uma função de tratamento
2meuClique = function() { alert('Fui clicado'); }
3// Vinculando a função ao evento de clique do botão
4// Não usar `on`. Em vez de `onclick` use `click` 
5btn.addEventListener("click", meuClique);
6
7// Clicar no botão ou executar `btn.click()`

Ao clicar no botão uma janela é exibida:

img
img

Ao usar novamente o comando console.dir( btn ) esperava ver no onclick alguma informação sobre a função de tratamento, mas estava null.

Usando a função getEventListeners consegui localizar a função meuClique

img
img

$_ retorna o valor da última expressão avaliada

$0, $1,$2, $3 e $4 referenciam os últimos 5 elementos inspecionados

$(selector, [startNode]) referencia o primeiro elemento no DOM especificado pelo seletor CSS.

1$('input')
2<input id="clickMe" type="button" value="Clique aqui">

$$(selector, [startNode]) retorna um array de objetos

1var images = $$('img');
2for (each in images) {
3  console.log(images[each].src);
4}

$x(path, [startNode]) retorna um array de elementos que batem com uma expressão XPath

1$x("//p")

copy copia um objeto para a área de transferência

1copy($0);

monitor(function) monitor a execução de uma função

1function sum(x, y) {
2  return x + y;
3}
4monitor(sum);
5
6sum(1,2)
7// function sum called with arguments: 1, 2

monitorEvents(object[, events]) monitora eventos

1monitorEvents(window, "resize");
2// resize Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}
3// resize Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}

unmonitorEvents(object[, events])

Mais opções do console

1const label = 'Adolescent Irradiated Espionage Tortoises';
2console.group(label);
3console.info('Leo');
4console.info('Mike');
5console.info('Don');
6console.info('Raph');
7console.groupEnd(label);
1console.count();
2console.count('coffee');
3console.count();
4console.count();
5console.countReset();
6console.countReset('coffee');
 1console.table([
 2  {
 3    first: 'René',
 4    last: 'Magritte',
 5  },
 6  {
 7    first: 'Chaim',
 8    last: 'Soutine',
 9    birthday: '18930113',
10  },
11  {
12    first: 'Henri',
13    last: 'Matisse',
14  }
15]);
1console.time();
2for (var i = 0; i < 100000; i++) {
3  let square = i ** 2;
4}
5console.timeEnd();
1const first = () => { second(); };
2const second = () => { third(); };
3const third = () => { fourth(); };
4const fourth = () => { console.trace(); };
5first();
1console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');
img
img

Referências

comments powered by Disqus