You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+32-12
Original file line number
Diff line number
Diff line change
@@ -2,25 +2,45 @@
2
2
3
3
- Available in Chrome Web Store as [API Monitor](https://chromewebstore.google.com/detail/api-monitor/bghmfoakiidiedpheejcjhciekobjcjp)
4
4
5
-
Whether you're developing a Single Page Application (SPA) and want to assess implementation correctness or are curious about how something works, this tool adds additional functionality to the Chrome browser DevTools to reveal timeouts, intervals, idle callbacks, animation frames and `eval` usages while mapping their invocation call stacks to a source code location. If the page has mounted `video` or `audio` media element's, their events and property state changes can be observed as they happen ([documentation](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement), [example](https://www.w3.org/2010/05/video/mediaevents.html)).
5
+
If you're web developer and want to assess implementation correctness - 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, requestAnimationFrame, requestIdleCallback and their terminator functions.
6
6
7
-
###Motivation
7
+
#### Allows:
8
8
9
-
To expedite issues discovery, here are some examples from experience:
9
+
- to measure callback execution self-time.
10
+
- to see `requestAnimationFrame` callback request frame rate.
11
+
- visit every function in the call stack (if available), bypass or pause while debugging.
12
+
- detect eval function usage, see its argument and return value, same for setTimeout and setInterval when called with a string instead of a function.
13
+
- for every mounted video or audio media element's to see it’s state and properties.
10
14
11
-
- A ~10ms delay interval constantly consuming approximately 10% of CPU from a third-party library, solely to check if the page was resized.
12
-
- 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'](https://webpack.js.org/configuration/devtool/) in production mode.
13
-
- A substantial number of hidden video elements in the DOM that were consuming resources, unexpectedly limited to 100 medias per domain.
14
-
- An unattended interval that was unintentionally left running and contributed to a slowly growing memory.
15
+
#### Helps to spot:
15
16
16
-
To explore the internals of a complex systems.
17
+
- incorrect timeout delay.
18
+
- bad handler for terminator function.
19
+
- terminating non existing or elapsed timeout.
20
+
21
+
#### Motivation:
22
+
23
+
- To expedite issues discovery.
24
+
25
+
#### Wrapped native functions:
26
+
27
+
- eval (by default off)
28
+
- setTimeout
29
+
- clearTimeout
30
+
- setInterval
31
+
- clearInterval
32
+
- requestAnimationFrame
33
+
- cancelAnimationFrame
34
+
- requestIdleCallback
35
+
- cancelIdleCallback
36
+
37
+
##### Note:
38
+
39
+
- while measuring performance of your code – consider disabling this extension as it may affect the results.
17
40
18
41
<details>
19
42
<summary> <strong>Example</strong> </summary>
20
-
21
-

22
43

23
-

24
44

25
45
26
46
</details>
@@ -29,7 +49,7 @@ To explore the internals of a complex systems.
0 commit comments