Javascript debug

Collections

• How to Inspect Interactions in the Browser

Developer Tools secrets that shouldn’t be secrets

console.log({width})

function third(name) {
  if(!name)
    console.error(`Name isn't defined :(`)
  else
    console.assert(
      name.length <= 8,
      `"${name} is not less than eight letters"`
    )

• console.group()
• console.table()
• Blinging it up: () and $()
• Console Utilities

Monitor Events and Function Calls via Console

Monitor Events

Pass an element and a series of events to monitorEvents to get a console log when the event happens:

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

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

You can pass an array of events to listen for multiple events. The logged event represents the same event you'd see if you manually called addEventListener.

Monitor Function Calls

The monitor method allows you to listen for calls on a specific function:

// 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

I really like that you can view the arguments provided, which is great for inspecting.

I usually opt for logpoints instead of embedding console statements in code, but monitor and monitorEvents provide an alternative to both.

---

Children

1. Debugging dynamic content in browser dev tools