API Monitor - Chrome Developer Tools extension

• Available in Chrome Web Store as API Monitor

Chrome Developer Tools API 🔎 panel tries to gather every bit of useful information from the usage of certain native functions that are prone to human errors, or are difficult to spot intuitively.

Motivation

To assess Web Application implementation correctness and expedite issues discovery. See examples.

Specification

• Gather callstack that is used to call every wrapped function:

  • short - just the nearest initiator.
  • full - from the root to the nearest initiator (from left to right).

• Aggregate information about currently scheduled timeouts and intervals.

• Gather details about which terminators are cancelling those scheduled setters:

  • setTimeout, setInterval, requestAnimationFrame, requestIdleCallback.

• Allow to initiate a debugging session by redirecting the code flow to a debugger breakpoint right before the callback invocation.

  • Hit F11 (step inside) twice in order to progress into the callback itself.

• Allow to bypass (skip) setter's callback, or terminator invocation function.

• Measure callback's execution self-time.

  • Warn if it exceeds 4/5 (13.33ms) of 60 FPS hardcoded frame-rate (16.66ms).

• Count calls per second (CPS) where applicable.

• Detect incorrect timeout argument passed to setTimeout, setInterval, requestIdleCallback, scheduler.postTask.

• Detect terminator function invocation with a handler that is non-positive integer, or of non-existent/elapsed setter.

• Detect timeouts cleared with clearInterval, or intervals cleared with clearTimeout.

• Detect eval function usage in runtime, as well as setTimeout and setInterval when called with a string callback instead of a function.

  • By default - off, cause the fact of wrapping it, excludes the access to local scope variables from the eval script, and as a result, may break the application if it does depend on it.

• Monitor Worker's methods and event handlers metrics.

  • Warn if number of active workers exceeds number of available CPU cores.
    • keep in mind: this extension can't wrap self.close() in worker global context (only terminate() in top context)
  • Detect anomalies:
    • attempt to add already added listener with addEventListener.
    • attempt to remove unknown listener with removeEventListener.

• Monitor scheduler.yield and scheduler.postTask.

  • Calls, delay, priority, aborts, self-time metrics.

• Monitor mounted video and audio media elements in DOM.

  • Present control panel with basic media functions.
  • Show media events and number of times they have been fired.
  • Show current state of properties.
  • Allow to toggle the state of changeable boolean properties e.g. controls, preservesPitch...

• Prevent the system from going to Sleep state due to user inactivity for a better observational experience. By default - off.

Wrappable native functions

• eval
• setTimeout
  • clearTimeout
• setInterval
  • clearInterval
• requestAnimationFrame
  • cancelAnimationFrame
• requestIdleCallback
  • cancelIdleCallback
• Worker
  • constructor
  • terminate
  • onmessage
  • onerror
  • postMessage
  • addEventListener
  • removeEventListener
• scheduler
  • postTask
  • yield

Screenshots

Note

While measuring performance of your code – consider disabling this extension as it may affect the results.

Build requirements

• Linux: deno, make, jq, zip, tree, python3

Build instructions

Here is a short list to help you get started, for a full set of make commands refer to ./Makefile:

make clean install  # install dependencies
make dev            # build in development mode and watch for changes
make prod           # build in production mode and make extension.chrome.zip