UD5 Toolkit
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Navigation Timing API Viewer - Online Page Load Breakdown
Navigation Timing API Viewer
Break down your page load timeline using real browser Navigation Timing data. Paste exported JSON or analyze this page live.
You can export this data from Chrome DevTools:
performance.getEntriesByType('navigation')[0].toJSON() or via the console.
Loading...
Collecting navigation timing data for this page...
Frequently Asked Questions
The Navigation Timing API provides precise timestamps and metrics about the page load process, broken down into stages like DNS lookup, TCP connection, request/response, and DOM processing. It helps developers analyze and optimize web performance.
Open your browser's DevTools console, run
performance.getEntriesByType('navigation')[0].toJSON() and copy the JSON output. If you're using an older API, JSON.stringify(performance.timing) works too. Then paste it above.Time To First Byte (TTFB) measures the time from the start of the request until the first byte of the response arrives. It equals
responseStart - requestStart and reflects server responsiveness and network latency.A value of 0 means that particular phase did not occur (e.g., no redirect) or that the browser didn't record it. For example,
secureConnectionStart is 0 for non-HTTPS connections, and redirectStart is 0 when no redirects happened.Due to browser security (same-origin policy), you can only retrieve detailed timing data for pages that explicitly allow it via the
Timing-Allow-Origin HTTP header. However, you can always measure your own pages or pages you control.Focus Order Analyzer - Online Tab Navigation Check
Enter a URL and extract tabâindex order violations and focusable elements. Quick accessibility audit. Clientâside fetch.
View Timeline Playground - Online ElementâInâView Animations
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
HTML Structure Viewer - Online Indented Tag Explorer
Paste HTML and see a collapsible tree of tags. Understand document outline and nesting. Handier than raw code.
Tab Order Visualizer - Online See Focus Navigation Path
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
Tab Focus Order Checker - Online Visualize Tab Navigation Flow
Paste HTML and see the order in which elements would receive focus via Tab key. Highlight issues. Local accessibility testing.
UI Animation Timing Demo - Online Easing Presets
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Local JSON Data Explorer - Online Browser Storage Viewer
View, edit, and manage JSON objects saved in your browser's localStorage. Delete, export, or import keys. No setup.
Simple Page Speed Tester - Online Core Web Vitals Emulator
Enter a URL and get a quick simulation of First Contentful Paint, LCP, and CLS using browser metrics. Lightweight alternative.
Online PDF Page Counter - Instant Document Inspector
Check how many pages a PDF has without uploading it (uses FileReader). Also shows file size and title if available. Simple and fast client-side tool.
Broadcast Channel API Demo - Online CrossâTab Communication
Open the same page in two tabs and send messages between them. See realâtime crossâtab communication. Learn the API.
Scroll Timeline Playground - Online ScrollâDriven Animation
Create an animation that advances with scroll using animationâtimeline: scroll(). See the visual timeline editor. Modern CSS.
ariaâdescribedby Visualizer - Online Check Descriptions
Highlight elements with ariaâdescribedby and see the linked description text. Verify a11y annotations.
iCalendar File Viewer - Online ICS Parser
Drop or paste an .ics file and see all events in a readable table. Check dates, times, and locations. Privacyâfriendly.
Screen Reader Text Visualizer - Online View Hidden A11y Content
Paste a website's HTML and see which text is only visible to screen readers (e.g., .srâonly). Preview the accessible layer.
Book Reading List - Online Track ToâRead & Finished
Add book titles and authors to a toâread list. Move them to 'finished' and add a rating. Data saved locally.
3rdâParty Script Impact Analyzer - Online See Cost
Enter a URL and see a waterfall of external scripts with their download size and execution time estimate. Identify performance culprits.
Online SRT Subtitle Shifter - Adjust Timing & Sync
Load an SRT file and shift all timestamps forward or backward by milliseconds or seconds. Fix out-of-sync subtitles instantly. Download corrected file.
Email Header Parser - Online Analyze Email Delivery Path
Paste raw email headers and get a human-readable breakdown of the delivery route, authentication results, and delays. Private analysis.
IDBâKeyval Explorer - Online Simple KeyâValue Storage Viewer
Browse, edit, and delete keys stored by the idbâkeyval library in your browser. Handy for debugging PWAs.
BackgroundâBlendâMode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Caffeine HalfâLife Tracker - Online Blood Level Visualizer
Visualize how caffeine decays in your body over time. Enter intake amount and see remaining caffeine at bedtime to optimize sleep. Uses standard 5-hour half-life.
Live Web Vitals Monitor - Online RealâTime LCP, INP, CLS
Patch the PerformanceObserver and show your pageâs Core Web Vitals as you browse. See realâtime scores and suggestions.
CORS Header Debugger - Online Check CrossâOrigin Access
Enter a URL and see its CORS headers. Understand why a fetch fails. Check preflight responses. Clientâside debugger.
Window Size Detector - Online Outer & Inner Dimensions
See outerWidth, innerWidth, outerHeight, innerHeight, screenX/Y, and availWidth/Height live. Understand the viewport.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHEDâŚ) and see the animated transitions. Networking education.
PGP Message Viewer - Online Decode & Inspect
Paste an ASCIIâarmored PGP message and view its packet structure. See the encrypted/plaintext blocks without decrypting.
Data Structure Visualizer - Online Array, Stack, Queue
Add, remove, push, pop items and watch the data structure change visually. Supports arrays, stacks, and queues. For CS students.
ariaâhidden Conflict Finder - Online A11y Audit
Paste HTML and detect elements with ariaâhidden='true' that contain focusable children. An easy a11y win to fix.
Pathfinding Visualizer - Online A*, Dijkstra & BFS Grid
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.