API Monitor

Reveal active or passed timeouts, intervals, and eval invocation call stacks. Observe events and properties of media elements

Whether you're web developer and want to assess implementation correctness or just curious about how some site works, this tool adds additional panel to the browser’s DevTool that enables to see scheduled timeouts and active intervals, as well as to review and navigate to initiators of: eval, setTimeout, setInterval, requestIdleCallback, requestAnimationFrame and their terminator functions. Allows: - visit every function in the call stack (if available). - detect eval ­function usage, see its argument and return value, same for setTimeout and setInterval when called with a string instead of a function. - for every mounted video or audio media element's to see it’s state and properties, which media event was fired and how many times, plus toolbar to apply common actions. Helps to spot: - incorrect timeout delay, marked with ⁉️ (rare, critical). - bad handler for terminator function, marked with ⁉️ (common, arrogant - please read the documentation). - terminating non existing or elapsed timeout, in that case the delay will be shown as "N/A" (common, innocent). - invocations from external domains. - usages with extremely short delay causing high CPU usage with extremely low impact. The emphasis here is to lower the CPU usage to conserve energy and to use right and modern API for the purpose. - usages with high amount of active timers (> 1000) that can be written just as one timer that starts the desired sequence (chatgpt.com). Note: wrapper of eval function by default is turned off, cause the fact of wrapping it, in turn, introduces scope change limitation that can break the expected flow for a site that relay on access to local scope variables from eval context – for example: - youtube.com when video buffering stops after first chunk (spotted around 2024 Q3). - any site that has webpack’s module bundled with `devtools: eval`. Note: when you chose to do performance measurement of your code – consider disabling this extension as it may introduce additional workload and may affect the results. Wrapped native functions: - eval (by default off) - setTimeout / clearTimeout - setInterval / clearInterval - requestAnimationFrame / cancelAnimationFrame - requestIdleCallback / cancelIdleCallback Motivation: - To expedite issues discovery, here are some examples from experience: * A ~10ms delay interval constantly consuming approximately 10% of CPU from a third-party library, solely to check if the page was resized. * A bundled dependency library that utilizes the eval function, thereby preventing the removal of unsafe-eval from the Content Security Policy (CSP) header. It can be arguably intentional, but also may reveal a configuration issue when the package was bundled with webpack config's devtool: 'eval' in production mode. * A substantial number of hidden video elements in the DOM that were consuming resources, unexpectedly limited to 100 medias per domain. * An unattended interval that was unintentionally left running and contributed to a slowly growing memory. - To explore the internals of a complex systems. Source code: https://github.com/zendive/browser-api-monitor Please, do leave a comment if this extension helped you to find or fix something... Happy hacking!