DevTools Timeline Viewer

DevTools Timeline Viewer is a web application used to view and share Chrome DevTools performance traces via shareable URLs.

It supports loading trace files from:

• GitHub gists
• Public GitHub URLs
• Some public Dropbox URLs
• Public files on Google Drive
• Private files on Google Drive (requires OAuth authentication)
• Local files via drag-and-drop (specifically Profile-*.json files)

The project uses Cypress for integration testing. To execute the test suite, run:

yarn test

Once you have authorized the Timeline Viewer via the Google OAuth flow, it becomes a registered viewer for .json files in Google Drive.

To view a file:

1. Open the .json file in Google Drive.
2. Select Timeline Viewer as the application to open the file.
3. The trace will open in a new tab and load automatically.

Sharing traces via Google Drive: You can share a trace URL with other users if they meet both of these requirements:

1. They have authorized the Timeline Viewer to their Google Drive via the OAuth flow.
2. They have Edit permission for the specific Google Drive file.

To run the project locally for development, use the following commands:

1. Install dependencies:

yarn
# or
npm i

2. Start the development server:

yarn run dev
# or
npm run dev

The command will start a local server and open the site in your browser.

Note for developers:

• The docs folder in the master branch is what is published to GitHub Pages.
• Authentication keys have localhost:8833 whitelisted for local development.
• You can test loading private files from Drive locally using a URL pattern like: http://localhost:8833/?loadTimelineFromURL=drive://<FILE_ID>

To update the viewer to work with a specific Chrome DevTools version (e.g., when debugging Chrome on Android), follow these steps:

1. Remote debug the target Chrome version (Dev channel or Canary).
2. Open DevTools on the device.
3. Extract the version hash from the location.href. You can use this snippet in the console: copy(new URL(location.href).pathname.match(/@(\w+)/)[1])
4. Open docs/index.html and update the hash in the file with the extracted version string.