Monitoring Events

Greetings, friends! As part of the Console Utilities API in Google Chrome, we get access to the monitorEvents function in the DevTools console.

To begin, open up the Chrome DevTools console using the keyboard shortcut Option + Command + J on a Mac or Ctrl + Shift + J on Windows. Then, paste the following code into the console.

monitorEvents(window, 'resize');

By calling the monitorEvents function, we create a monitor that will watch for specific events. In the example above, we are watching the resize event on the window object, but you could have passed in any DOM element. As soon as we try resizing the browser, events will get logged to the console.

Event {
  isTrusted: true
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  defaultPrevented: false
  eventPhase: 2
  path: [Window]
  returnValue: true
  srcElement: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  target: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  timeStamp: 5857.100000143051
  type: "resize"
  [[Prototype]]: Event
}

The monitorEvents function gives us a shortcut to logging event details without having to add event listeners and then passing a callback function that logs the event to the console. The following function calls are very similar.

// Normal way of logging events
window.addEventListener('resize', (e) => {
  console.log(e);
});

// Shortcut that can be performed in Chrome DevTools console:
monitorEvents(window, 'resize');

You can also pass in an array of events to the monitorEvents function.

monitorEvents(window, ['resize', 'scroll']);

This will let you monitor both the resize and scroll events. This could be useful for troubleshooting code. Keep in mind that this is simply another shortcut provided by Google Chrome. We could have used the following code instead:

['resize', 'scroll'].forEach(event => {
  window.addEventListener(event, (e) => {
    console.log(e);
  })
})

We can also stop monitoring all events on an object or DOM element by using the unmonitorEvents function.

unmonitorEvents(window);

I think the most helpful feature of the monitorEvents function is the ability to quickly see what keys are being pressed on the keyboard.

monitorEvents(document, 'keydown');

After running this code in the console, click anywhere on the page outside of DevTools to get the document in focus. Start typing, and you should see each keystroke logged to the console. Below is an event logged to the console when the left Shift key is pressed on the keyboard.

KeyboardEvent {
  isTrusted: true
  altKey: false
  bubbles: true
  cancelBubble: false
  cancelable: true
  charCode: 0
  code: "ShiftLeft"
  composed: true
  ctrlKey: false
  currentTarget: null
  defaultPrevented: false
  detail: 0
  eventPhase: 0
  isComposing: false
  key: "Shift"
  keyCode: 16
  location: 1
  metaKey: false
  path: (4) [body.f--default.Chrome.dark.dark-full, html, document, Window]
  repeat: false
  returnValue: true
  shiftKey: true
  sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
  srcElement: body.f--default.Chrome.dark.dark-full
  target: body.f--default.Chrome.dark.dark-full
  timeStamp: 205333.39999985695
  type: "keydown"
  view: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  which: 16
[[Prototype]]: KeyboardEvent
}

Cool! The monitorEvents function gives us a quick way of obtaining information about various keys without having to look up documentation about them somewhere online. If you do want to check out the documentation, however, MDN has a list of standard values for each keyboard event.