Merge pull request #17 from zendive/next

- Worker telemetry
  - `constructor`, `terminate`, `onmessage`, `onerror`, `postMessage`, `addEventListener`, `removeEventListener`.
  - Worker instances are grouped by source code specifier.
- Scheduler telemetry
  - `yield`, `postTask`.
- Fix for async anonymous trace link.
- Some minor UI changes.
- Self time cell now has revolving modes, toggling between {latest} value and aggregated one, in the format of: {mean} ± {standard-deviation} {maximum}.
- Added detection of cases when extension stops working due to extension update, while being used. Added two types of alerts that inform about the need to reload inspected tab or DevTools itself.

Author: zendive

Makefile

@@ -1,12 +1,16 @@
-.PHONY: clean install dev valid test prod serve_mirror
+.PHONY: clean install dev valid test test-dev prod mirror-dev mirror-serve
 .DEFAULT_GOAL := dev
-DENO_DEV = NODE_ENV=development deno run --watch
-DENO_PROD = NODE_ENV=production deno run
-DENO_OPTIONS = --allow-env --allow-read --allow-run
-CHROME_ZIP="extension.chrome.zip"
-OUTPUT_DIR = ./public/
-BUILD_DIR = ./public/build/
-BUILD_SCRIPT = ./build.ts
+DENO_DEV := NODE_ENV=development deno run --watch
+DENO_PROD := NODE_ENV=production deno run
+DENO_OPTIONS := --allow-env --allow-read --allow-run
+VERSION != deno eval "\
+	import m from './manifest.json' with {type:'json'};\
+	console.log(m.version);\
+	"
+CHROME_ZIP := "extension.chrome-$(VERSION).zip"
+OUTPUT_DIR := ./public/
+BUILD_DIR := ./public/build/
+BUILD_SCRIPT := ./build.ts
 
 clean:
 	rm -rf ./node_modules $(BUILD_DIR) $(CHROME_ZIP)
@@ -39,7 +43,12 @@ prod: test
 
 	tree -Dis $(BUILD_DIR) *.zip | grep -E "api|zip"
 
-serve_mirror:
+mirror-dev:
+	@echo "🎗 reminder to stop \"make dev\""
+	rm -rf $(BUILD_DIR)
+	$(DENO_DEV) $(DENO_OPTIONS) $(BUILD_SCRIPT) --mirror
+
+mirror-serve:
 	@echo "🎗 reminder to switch extension off"
 	@echo "served at: http://localhost:5555/mirror.html"
 	python3 -m http.server 5555 -d ./public/

README.md

@@ -31,10 +31,21 @@ To assess Web Application implementation correctness and expedite issues discove
 - Measure callback's execution self-time.
   - Warn if it exceeds 4/5 (13.33ms) of 60 FPS hardcoded frame-rate (16.66ms).
 
-- Count `requestAnimationFrame` calls per second (CPS).
+- Count calls per second (CPS) when applicable.
   - If requested recursively - it reflects animation FPS.
 
-- 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 brake the application if it does need it.
+- 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: extension API 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.
@@ -56,12 +67,25 @@ To assess Web Application implementation correctness and expedite issues discove
   - `cancelAnimationFrame`
 - `requestIdleCallback`
   - `cancelIdleCallback`
+- `Worker`
+  - `constructor`
+  - `terminate`
+  - `onmessage`
+  - `onerror`
+  - `postMessage`
+  - `addEventListener`
+  - `removeEventListener`
+- `scheduler`
+  - `postTask`
+  - `yield`
 
 </details>
 <details>
   <summary> <strong>Screenshots</strong> </summary>
 
+![screenshot](./doc/screenshot-01.png)
 ![screenshot](./doc/screenshot-02.png)
+![screenshot](./doc/screenshot-03.png)
 ![screenshot](./doc/screenshot-04.png)
 
 </details>
@@ -73,7 +97,7 @@ To assess Web Application implementation correctness and expedite issues discove
 
 - OS: Linux
 - Node: 22.14.0 (LTS)
-- [Deno](https://docs.deno.com/runtime/getting_started/installation/) 2.3.5
+- [Deno](https://docs.deno.com/runtime/getting_started/installation/) 2.4.2
 
 ### Build instructions
 

build.ts

@@ -5,6 +5,7 @@ import manifest from './manifest.json' with { type: 'json' };
 
 const nodeEnv = Deno.env.get('NODE_ENV');
 const isProd = nodeEnv === 'production';
+const isMirror = Deno.args.includes('--mirror');
 const buildOptions: BuildOptions = {
   plugins: [
     esbuildSvelte({
@@ -25,6 +26,9 @@ const buildOptions: BuildOptions = {
     __app_name__: `"browser-api-monitor@${manifest.version}"`,
     __app_version__: `"${manifest.version}"`,
     __home_page__: `"${manifest.homepage_url}"`,
+    __release_page__:
+      `"https://github.com/zendive/browser-api-monitor/releases"`,
+    __mirror__: `${isMirror}`,
   },
   bundle: true,
   platform: 'browser',

deno.json

@@ -34,13 +34,13 @@
     ]
   },
   "imports": {
-    "esbuild": "https://deno.land/x/[email protected]/mod.js",
-    "@luca/esbuild-deno-loader": "jsr:@luca/[email protected]",
-    "esbuild-svelte": "npm:[email protected]",
+    "esbuild": "https://deno.land/x/[email protected]/mod.js",
+    "esbuild-svelte": "npm:[email protected]",
     "svelte-preprocess": "npm:[email protected]",
 
-    "@std/expect": "jsr:@std/expect@^1.0.15",
-    "@std/testing": "jsr:@std/testing@^1.0.11",
-    "happy-dom": "npm:[email protected]"
+    "@std/expect": "jsr:@std/expect@^1.0.16",
+    "@std/testing": "jsr:@std/testing@^1.0.15",
+    "happy-dom": "npm:[email protected]",
+    "scheduler-polyfill": "npm:[email protected]"
   }
 }