Javascript - console.dir
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:
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');
{{< img src=“https://developers.google.com/web/updates/images/2015-05-20-get-and-debug-event-listeners/get-debug-event-listeners.gif” alt=“img” >}}
