Wtop av Chaitanya Kadu

Browsers by default provide us with powerful DevTools, which are very useful when it comes to analyzing or debugging the websites. There are dedicated panels such as Network, Performance, Memory, and Security, which provide with numerous metrics. But I consistently faced an inconvenience, I had to toggle between multiple panels to get a basic overview. The metrics are scattered and visualization becomes a bit tedious.

wtop surfaces key metrics about the currently active website with a single click, all in a minimal interface. It is built using Plasmo, and supports Chrome, Firefox and Edge browsers. Metrics are organized into five categories: network, memory, metadata, runtime and performance. Metrics are refreshed every 2 seconds.

• url — Resource URL.
• type — Resource type (document, script, image, etc.).
• dnsLookup — Time spent resolving DNS.
• tcpHandshake — Time to establish TCP connection.
• tlsHandshake — Time for TLS/SSL negotiation.
• redirect — Time spent following redirects.
• request — Time from request sent to first response.
• response — Time to download the response.
• protocol — HTTP protocol used (h1, h2, h3).
• transferSize — Total bytes transferred over the network.
• encodedBodySize — Compressed response size.
• decodedBodySize — Uncompressed response size.
• compressed — Whether the response was compressed.
• cached — Whether the resource came from cache.
• serviceWorker — Whether a Service Worker handled the request.

• jsHeapUsed — Currently used JavaScript heap (MB).
• jsHeapTotal — Allocated JavaScript heap (MB).
• jsHeapLimit — Maximum available JavaScript heap (MB).
• storage.cookies — Number of cookies.
• storage.localStorage — Local Storage entries.
• storage.sessionStorage — Session Storage entries.
• storage.quota — Available storage quota.
• storage.usage — Storage currently used.
• storage.caches — Number of Cache Storage entries.
• storage.indexedDB — Number of IndexedDB databases.

• title — Page title.
• framework — Detected frontend framework.
• cssFramework — Detected CSS framework.
• dimensions.width — Viewport width (px).
• dimensions.height — Viewport height (px).
• secure — Whether the page uses HTTPS.
• navigationType — How the page was loaded.
• language — Document language.
• charset — Document character encoding.
• crossOriginIsolated — Whether cross-origin isolation is enabled.
• historyLength — Browser history entries.
• readyState — Current document loading state.
• visibilityState — Whether the page is visible.
• hidden — Whether the page is hidden.

• workers — Active Web Workers.
• serviceWorker — Service Worker support/registration.
• wasm — WebAssembly support.
• webGL — WebGL support.
• webGPU — WebGPU support.
• hardwareConcurrency — Available logical CPU cores.
• sharedArrayBuffer — SharedArrayBuffer availability.
• offscreenCanvas — OffscreenCanvas support.
• webRTC — WebRTC support.
• webAudio — Web Audio API support.
• webGL2 — WebGL 2 support.
• crossOriginIsolated — Runtime is cross-origin isolated.

• firstPaint — Time until the first pixel is painted.
• firstContentfulPaint — Time until the first content appears.
• largestContentfulPaint — Time until the largest visible content renders.
• timeToFirstByte — Time until the first response byte arrives.
• domInteractive — Time until the DOM becomes interactive.
• domContentLoaded — Time until DOMContentLoaded fires.
• domComplete — Time until the DOM is fully loaded.
• loadEvent — Time until the load event completes.
• pageLoad — Total page load duration.
• domProcessing — Time spent processing the DOM.
• renderTime — Time spent rendering the page.