View DevTools Timeline trace files from Google Drive wicked easily
Switch branches/tags
Nothing to show
Clone or download

README.md

DevTools Timeline Viewer

Shareable URLs for your Chrome DevTools Timeline traces.

drawing 1

Works with public github urls, github gists, and files on google drive (once authenticated).


Once authorized, you'll see Timeline Viewer as a registered Google Drive viewer when opening .json files. Once you select the Timeline Viewer, it will open in a new tab and load the timeline asset from your Drive.

You can share this URL with any users who ① have authorized Timeline Viewer to Drive with Google OAuth and ② have View permission to the Google Drive asset.

image

Visit your Google security permissions if you'd like to revoke authorization.

Dev

Run:

  • yarn or npm i
  • yarn run dev or npm run dev - it will open site in browser and run server for you.

Master branch's docs folder is what's published to gh-pages, to simplify deployment.

Auth keys have localhost:8833 whitelisted, so you can hack there.

Testing

Cypress is used for integration testing. To run test just invoke yarn test

Updating DevTools Version

  • Remote debug Chrome on Android (Dev channel or Canary).
  • (Verify it works as expected)
  • Open devtools on devtools
  • Look at location.href and grab the hash out of it
    • copy(new URL(location.href).pathname.match(/@(\w+)/)[1])
  • Pop that into the hash in docs/index.html