Vibeleaderboard
← Back to Tools
Index / tool

Chrome DevTools Timeline Viewer

https://github.com/chromedevtools/timeline-viewer
Visit chromedevtools.github.io
Category
Developer Tools
Rank
No. 1478Tools index
Pricing
Open Source
Type
TOOL
Builder
chromedevtools
GitHub
347 stars
Date

About

Web app for viewing Chrome DevTools Timeline trace files shared via Google Drive.

What it does

It turns saved performance traces into shareable browser sessions using Chrome’s own performance interface. Drop a local profile onto the page, submit a supported public URL, authenticate to Drive, or open two trace URLs together for synchronized comparison.

Why it's ranked here

Its strongest case is practical trace sharing without installing a desktop utility. Multiple input sources, direct DevTools rendering, progress feedback, and paired viewing make it useful. The brittle integration with a pinned remote DevTools build keeps the verdict mixed.

What's good

It accepts GitHub gists, public GitHub links, selected Dropbox links, Drive files, and local drag-and-drop profiles. The comparison mode places multiple traces in frames and synchronizes visible time ranges. Cypress provides at least one browser-level integration check.

Tradeoffs

Private Drive access requests the broad Drive authorization scope. Shared Drive links require recipients to authorize the viewer and hold Edit permission. The viewer rewrites network requests and patches DevTools internals, so upstream interface changes are a real maintenance risk. The documented Chrome compatibility history includes broken combinations.

How to use it well

Use it when engineers need to exchange saved Chrome performance traces or compare two recordings in a familiar interface. Prefer public links or local drops when Drive authorization is unnecessary. It does not record traces, diagnose findings automatically, or replace a broader profiler.

Technical notes+

The browser application is served from docs/, with docs/timeline_viewer.js coordinating URL inputs, drag-and-drop, Drive downloads, split frames, and patched fetch handling. docs/dev_tools.js imports a pinned Chrome DevTools frontend revision, exposes selected modules globally, intercepts timeline loading, and modifies internal UI behavior. docs/sync_view.js propagates visible trace windows between framed panels. docs/auth.js uses Google OAuth with the full Drive scope, while docs/storage.js targets Drive API v2 for uploads and permissions. package.json declares no runtime dependencies and uses http-server, ESLint, and Cypress for development. test/integration/index_page_spec.js checks only that the authorization control is visible.

Observed

License
Apache License 2.0
Primary language
JavaScript
Interface
Hosted browser application
Inputs
Local profile drops, GitHub links and gists, selected Dropbox links, and Google Drive files
Development surface
Install with npm or Yarn; local serving and test scripts are provided
Runtime packaging
No declared runtime dependencies
Testing
Cypress integration tests run in Chrome
Deployment structure
The docs directory is published through GitHub Pages

Read from README.md, package.json, docs/auth.js, docs/utils.js, docs/storage.js, docs/dev_tools.js, docs/sync_view.js, docs/service-worker.js, docs/timeline_viewer.js, test/cypress/support.js, test/integration/index_page_spec.js, LICENSE, .travis.yml, cypress.json, .eslintignore.

What it can do

  • Load Chrome DevTools Timeline trace files

    Timeline trace file URL or file path → Loaded trace data ready for visualization

  • Import trace files from Google Drive

    Google Drive shared link to trace file → Imported trace data in the viewer

  • Visualize performance timeline data

    Chrome DevTools Timeline trace file → Interactive timeline visualization with performance metrics

  • Analyze JavaScript execution performance

    Timeline trace data → Performance analysis showing script execution times and bottlenecks

  • Display network activity timeline

    Timeline trace file with network data → Network requests timeline with timing information

  • Show frame rendering performance

    Timeline trace data with rendering information → Frame-by-frame rendering performance visualization

Tags

chromedevtoolsperformancetracing

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.