Skip to content

Commit 7d7a962

Browse files
committed
update readme
1 parent da7728f commit 7d7a962

File tree

4 files changed

+32
-12
lines changed

4 files changed

+32
-12
lines changed

README.md

+32-12
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,45 @@
22

33
- Available in Chrome Web Store as [API Monitor](https://chromewebstore.google.com/detail/api-monitor/bghmfoakiidiedpheejcjhciekobjcjp)
44

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.
66

7-
### Motivation
7+
#### Allows:
88

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.
1014

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:
1516

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.
1740

1841
<details>
1942
<summary> <strong>Example</strong> </summary>
20-
21-
![screenshot](./doc/screenshot-01.png)
2243
![screenshot](./doc/screenshot-02.png)
23-
![screenshot](./doc/screenshot-03.png)
2444
![screenshot](./doc/screenshot-04.png)
2545

2646
</details>
@@ -29,7 +49,7 @@ To explore the internals of a complex systems.
2949

3050
- OS: Linux
3151
- Node: 22.12.0 (LTS)
32-
- Deno: 2.1.4
52+
- Deno: 2.1.7
3353

3454
### Build instructions
3555

doc/screenshot-01.png

-863 KB
Binary file not shown.

doc/screenshot-03.png

-402 KB
Binary file not shown.

doc/screenshot-04.png

-97 KB
Loading

0 commit comments

Comments
 (0)