Monitorar eventos e chamadas de função via console

Apesar de ter trabalhado no complexo Firefox por vários anos, sempre adorarei o velho e simples console.log depuração. O registro pode fornecer uma trilha de auditoria à medida que os eventos ocorrem e um texto que pode ser compartilhado com outras pessoas. O senhor sabia que o Chrome oferece monitorEvents e monitor para que o senhor possa obter um log sempre que um evento ocorrer ou uma função for chamada?

Monitorar eventos

Passar um elemento e uma série de eventos para o monitorEvents para obter um log de console quando o evento ocorrer:

// Monitor any clicks within the window
monitorEvents(window, 'click')

// Monitor for keyup and keydown events on the body
monitorEvents(document.body, ['keyup', 'keydown'])

O senhor pode passar uma matriz de eventos para ouvir vários eventos. O evento registrado event representa o mesmo evento que o senhor veria se chamasse manualmente o addEventListener.

Chamadas de função do monitor

O monitor permite que o senhor ouça as chamadas em uma função específica:

// Define a sample function
function myFn() { }
// Monitor it
monitor(myFn)

// Usage 1: Basic call
myFn()
// function myFn called

// Usage 2: Arguments
myFn(1)
// function myFn called with arguments: 1

Eu realmente gosto do fato de o senhor poder visualizar os argumentos fornecidos, o que é ótimo para inspecionar.

Normalmente, opto por pontos de registro em vez de incorporar console no código, mas o monitor e monitorEvents oferecem uma alternativa a ambos.