Resource Timing Viewer - Online See All Asset Loads
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
UD5 Toolkit
Measure FP, FCP & LCP in real-time – right in your browser
Enter a relative path (e.g., /about or page.html) to measure its paint timings. The page will be loaded inside a hidden iframe. Cross-origin URLs are not supported due to browser security.
FP marks the time when the browser renders the first pixel on the screen. It represents the very first visual change, even if it’s just a background color change.
FCP measures the time until the first text, image, or non-white canvas element is painted. It gives a better sense of when useful content appears.
LCP reports the render time of the largest image or text block visible within the viewport. It's a core Web Vital for measuring perceived loading speed.
Minimize render-blocking resources (CSS/JS), use efficient font loading, and reduce server response time. Preload key assets and eliminate unnecessary code.
LCP may update as the page loads and larger elements appear. The final LCP is usually recorded after the page is fully interactive. Our tool listens for the latest entry.
Google recommends FP/FCP under 1 second for a good experience, and LCP under 2.5 seconds. Values above 4 seconds (LCP) are considered poor.
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
See your device's battery level, charging status, and discharge time using the Battery Status API. Fun utility.
Connect to a BLE device and read its Battery Service characteristic. See the charge level in a gauge.
See the current state of a Service Worker for your page: installing, waiting, active. Unregister or skip waiting. Developer utility.
Estimate arrival time with driving duration, breaks, and time zone changes. Plan your road trip precisely.
Load images or use colors and apply all 15 CSS blend modes. Visual tester for creative effects.
See the current Service Worker registration, its state, and scope. Send 'skipWaiting' and update. PWA debug.
Swap between physical and logical properties (margin‑inline vs margin‑left). Live preview with writing‑mode. Internationalize your CSS.
Set up multiple @layers and use revert‑layer to fall back. See the computed style and cascade resolution live.
Paste a raw server log snippet and see a structured table with IP, method, URL, and status. Quick audit.
Manipulate CSS values as typed objects using attributeStyleMap. Convert between CSSUnitValue, CSSMathSum, etc. Futuristic CSS‑in‑JS.
Apply will‑change to any element and see its effect on compositing. Learn best practices for smooth animations.
Estimate how long a battery will last given capacity (mAh/Wh) and load current. Also computes backup time for power banks. Quick and local.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Register a custom CSS property with syntax, initial value, and inherits. Animate colors and numbers that couldn’t before.
Schedule tasks with user‑visible, user‑blocking, or background priority. See execution order and delays. Modern web perf.
Enter a URL and instantly generate a PDF version using the browser's print-to-pdf engine. Private, no upload.
Paste your CSS and see rules sorted by specificity. Find overrides and potential collisions. Understand your cascade.
Enter network name and password to generate a stylish printable card for visitors. Local, no data leak.
Upload any picture and instantly get a 5‑color palette. Useful for UI design themes. Canvas‑based extraction.
Apply user‑select: none, text, all and see how it affects selection. Copy the CSS snippet for your UI elements.
Set an alarm relative to today's sunset (e.g., 30 minutes before). Perfect for evening routines. Uses geolocation (optional).
Test the new style() function inside @container to query custom property values. Revolutionary component‑based responsive design.
Paste your CSS and get a sorted list of all custom properties defined under :root with their values. Quick audit.
Enter a URL and instantly generate a PDF version using the browser's print-to-pdf engine. Private, no upload.
Implement a dark/light theme toggle that respects prefers‑color‑scheme. Copy the complete JavaScript and CSS.
Build a renovate.json file to automate dependency updates. Choose schedule, automerge, and package rules. Local.
See every HTML input type in one page. Check browser support and styling. Copy sample markup. Quick frontend reference.
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Build a Vite configuration file by selecting plugins (Vue, React, etc.), aliases, and build options. Copy the final code.