Javascript - console.dir

Considere o seguinte página:

<html>
  <head></head>
  <body>
    <input id="clickMe" type="button" value="Clique aqui">
  </body>
</html>

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

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

var 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:

console.log( btn )
<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.

console.dir( btn )

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

Adicionado um evento de clique

// Definindo uma função de tratamento
meuClique = function() { alert('Fui clicado'); }
// Vinculando a função ao evento de clique do botão
// Não usar `on`. Em vez de `onclick` use `click` 
btn.addEventListener("click", meuClique);

// Clicar no botão ou executar `btn.click()`

Ao clicar no botão uma janela é exibida:

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

$_ 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.

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

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

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

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

$x("//p")

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

copy($0);

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

function sum(x, y) {
  return x + y;
}
monitor(sum);

sum(1,2)
// function sum called with arguments: 1, 2

monitorEvents(object[, events]) monitora eventos

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

unmonitorEvents(object[, events])

Mais opções do console

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

console.count();
console.count('coffee');
console.count();
console.count();
console.countReset();
console.countReset('coffee');

console.table([
  {
    first: 'René',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
]);

console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

Javascript - console.dir

Adicionado um evento de clique

Mais opções do console

Referências