Back to TIL list

Javascript - console.dir

Created at

Considere a 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:

img
img

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 )

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

// Definindo uma função de tratamentomeuClique = 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:

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.

$('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');

null

Referências