chromedevtools / timeline-viewer Goto Github PK

We are not showing any user-friendly message if file on gdrive is absent or doesn't have correct permissions. Right now we just show start page and title as undefined.

What if we preload all devtools resources? Right they are fetched by initializeDevTools.
We can include all dev tools resources in our html page with preload attr, can't we?

upd: prefetch -> preload

Linking to GoogleChrome/lighthouse#1910

Load two traces at once. Do a split so you can compare them.

Add possibility to drag&drop file. Since TV (😭) has authorized permissions to gdrive, we can simplify users life giving them possibility to drag&drop file, then we upload it on gdrive and show timeline stuff.
wdyt?

p.s. as usual I can be in charge of that :)

The motivating user story

• Developer records a timeline trace that's interesting
• Developer interacts with timeline (changes zoom level, finds long frame(s))
• Developer determines source of interesting behavior
• Developer sends link to others which puts UI into same state

This is independent from, but a likely a step towards, #5

"same" state could be as simple as mirroring the time range, but would ideally mirror UI state. Specifically, focused functions in flame chart and selected tab (e.g Summary, Bottom-Up, Call Tree, Event Log) in bottom panel.

Thinking something like drive://:

https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://0B222_LMZAKv7eU1vX05rTAdCbXM

This could then be extensible for dropbox or gists.

First of all, thanks for this awesome tool! 👏

I am wondering if it's possible to programmatically load local trace files with https://chromedevtools.github.io/timeline-viewer/

I've been experimenting with puppeteer to automate the drag-and-drop interaction but I can't get a file to load. I noticed that on the initial dragover event, the UI changes from #dropbox to the timeline widget. I also figured out how to retrieve the drop target element from

With puppeteer, I am doing the following:

const fileInputIdentifier = 'some-unique-identifier';

await page.evaluate(() => {
  document.querySelector('#dropbox').dispatchEvent(new Event('dragover'));
});

await page.waitFor(2500);

await page.evaluate(
  id => {
    document.body.appendChild(
      Object.assign(document.createElement('input'), {
        id,
        type: 'file',
        onchange: async e => {
          ['dragenter', 'dragover', 'drop'].forEach(event => {
            window.Timeline.TimelinePanel.instance()._dropTarget._element.dispatchEvent(
              Object.assign(new Event(event), {
                dataTransfer: { files: e.target.files }
              })
            );
          });
        }
      })
    );
  },
  fileInputIdentifier
);

const fileInput = await page.$(`#${fileInputIdentifier}`);
await fileInput.uploadFile(filePath);
await fileInput.evaluate(upload =>
  upload.dispatchEvent(new Event('change', { bubbles: true }))
);

It appears as if the drop event is registered, but the file is not loaded due to the following error:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.from (<anonymous>)
    at UI.DropTarget._hasMatchingType (shell.js:1724)
    at UI.DropTarget._onDragEnter (shell.js:1722)
    at HTMLInputElement.onchange (VM49 __puppeteer_evaluation_script__:11)
    at VM46 __puppeteer_evaluation_script__:2

Maybe my approach is overkill or simply not feasible. Any idea? Thanks a lot :)

Does this suppose to support the HAR format exported by chrome dev tools in the network tab ?

If it does, I can't get that to work

it'll be much faster to load.

https://chromedevtools.github.io/timeline-viewer/ has the ability to load traces over XHR from any host that's providing the JSON with proper CORS headers. (The google drive integration is designed to set the right permission and use the undocumented (lol) URL that is served with CORS headers.

Ideally though, folks would be able to POST a trace to a public endpoint. That would, in turn, provide a URL where the trace is now available. And then it's just a matter of opening https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=<hosted trace url>

I'd be happy to foot the bill for this for now, and I feel confident I can secure a long-term billing situation.

Strawman proposal:

• service must be deployable on Google Cloud or Firebase
• javascript would be nice, though python could do in a pinch
• Maybe we set an expectation that traces will be deleted after 3 months or something?

User flow:

1. POST a trace to /trace/upload
2. Once uploaded the server validates that the data looks good
   • e.g. It appears to be JSON and roughly starts with {"traceEvents":[)
3. If it's a valid, the 200 response is the new url: /traces/<UUID>
   • We do sweet UUIDs like gfycat-style-urls?
   • If it's invalid or there's a problem, respond with 500
4. The client can then do whatever it needs with the trace URL, like creating the new timeline-viewer URL

I'm open to all ideas on the above. :)

Uncaught ReferenceError: viewer is not defined
    at ServiceWorker.installingWorker.onstatechange

on this line

    viewer.showInfoMessage('Timeline Viewer is ready to be used offline');

i think its a race condition with the script[defer] and the SW registration going quickly.

shouldn't be too hard a fix.

Profiling quickly turns into a group conversation, and a trace is the ground truth. Traces are somewhat portable, but the conversation around them usually ends up siloed in email threads and chats.

A while back I helped the Wikipedia eng team export a timeline trace. (T'was a hack using devtools on devtools, DPR emulation, and canvas todatauri/toblob :). It allowed them to do this:

But there should be better mechanisms than dead tree, post-its and highlighters.

The motivating user story

• Developer records a timeline trace that's interesting
• Developer shares this with his team via a clickable URL
• Everyone viewing it can mark and comment on it, marking time ranges with labels, pointing to specific events of interest.
• Ideally, those annotations are shared in realtime
• The annotations are definitely persisted, with attribution to the user who left them.

Proposal

Annotations could be shown in the Timeline as a track above User Timing

(Just a screenshot of existing timeline w/ usertiming track. Not a mock :)

Selecting a time range and labeling it, would add a block to that Annotations track.

User can also select individual events, highlight them, and add a comment. This would both add a visual highlight to the event in the flamechart, and create a separate block in the annotations section. Clicking that one would reveal the event it points to.

Implementation

This web-based timeline viewer can already provide authenticated access to timelines off a clickable link. There are currently no other promising tools for this.

Timeline flame chart needs support for an Annotations track and APIs to add "async events" to it in realtime, far after the trace has been parsed.

Timeline Viewer gets some annotating UI and functionality. The Google Realtime API looks tempting as it'd handle a LOT of these pieces.

The current SHA is 1yr9mo old and I was wondering if there is way to bump it to a more recent version? I tried pointing it to the latest commit (https://chromium.googlesource.com/chromium/src/+/6e6d1f1a1030a4d0b9d3d8089bb7bd089dccf3e4) and thats returning a 404 on https://chrome-devtools-frontend.appspot.com/serve_file/@6e6d1f1a1030a4d0b9d3d8089bb7bd089dccf3e4/shell.js

What is the right way to upgrade?

Thanks for this tool!

It would be cool to have a favicon to recognise it faster in bookmarks!

Maybe simply use an emoji like 📽 or 🎥 ?

The Timeline Viewer was functioning correctly until yesterday. However, following the merge of this pull request, it's no longer loading timeline traces appropriately. This issue affects not just our specific use case, where we utilize Amazon Cloudfront to deliver the tracer.json file, but it is also evident when trying to load traces from the provided example link. We request you to investigate this issue promptly.

For instance-
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=https://www.dropbox.com/s/s1n8m8n5oddgoxx/timeline-docs.json?dl=0 or
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=https://gist.github.com/paulirish/f83d30384954937dc3a1fae970a4ae52/raw/b25b27741c652d3091a316dfd8b58bf72f14aa74/twitch.json

Motivation
Currently, developer has to: save trace, upload it somewhere (cloud), add link from cloud to timeline viewer etc.

Proposal
Instead, create chrome extension to eliminate all work, just one click e.g in devtools and trace will be loaded either to gdive or our cloud, link will be generated and viewer opened in a new tab. Everything will be done automatically, developer will have to just share the link.

Features related to grive look broken.
Neither gdrive url nor file uploading to gdrive are not working...

ideas from @samccone:

basically
allow snapping to a performance.mark
to align
and always match the duration of the longest profile
then if you lock zooming
it will just work
which is chill

It will be incredibly useful feature.
Load trace -> go offline -> refresh page -> still have data

Since timeline-viewer site hosted with github (uses https) we can use service workers.

Thoughts?

P.S. I'd like to give it a shot 😃

Is there a wasm gunzip we can use?

Recently, I've been trying to upload large trace (246.8 MB) and window crashed...

What if add some controls
Like:

• for the network show only resources with e.g. highest priority
• filter resources like it's done in network tab

Why it's useful?

If thread has too many resources, it's better to filter some of them to manage resources priority

or should we consider it as part of dev tools?

It's more about future future and dicussion...
What if make it more googl-ish and use either MD or MDL?
Will this effort worth it? Does people use it? Many?

Has there been any attempt in converting this tool into a component which can be installed and embedded into an existing web application (built with React/Angular/Vue etc)? Also, is this being actively maintained/developed?

Then publish this tool to npm,

Hey people, thanks very much for this awesome tool.

A little context: I'm working with lighthouse programmatically, and every time I run lighthouse I'm storing the traces and devtoolslog information. My idea is to be able to use this data to debug problems.

The issue I'm having is whenever I use the timeline-viewer, some information get lost or shows very different information than when I open the same trace in devtools.

For example: This is how a trace with the timeline-viewer looks like

And this how it looks like in the chrome devtools

This is a gist with the trace: https://gist.githubusercontent.com/dvelasquez/0dc154ac0094f9f3b93ae92272a623da/raw/95a654573022deb81aca463b2fcd01b16f6c36be/trace-lighthouse.json

I try to load https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=0BzvYe7bYFf--aVhZM1RNR2N3cGc but get the following error.

Access to XMLHttpRequest at 'https://doc-04-30-docs.googleusercontent.com/docs/securesc/5rlchitd2i34t53mg48n1mnemadq3tlr/8isutrms3vsltmq3qk86onrabo262pku/1549900800000/12693691238713923539/11490550459140288456/0BzvYe7bYFf--aVhZM1RNR2N3cGc?e=download&gd=true&alt=media' from origin 'https://chromedevtools.github.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

At first I thought it was because I was trying to do something with first party auth (@google.com account) but it also fails with my @gmail.com account. I find that it works if I rollback 7b15219.

1. have a trace in your drive
2. never have given timeline-viewer permissions
3. try to open it.
4. errors arent useful. "Download of asset failed. CORS headers likely not applied."

after that... another bug

a URL like such won't work:
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=https://drive.google.com/file/d/0B92r6EdKIYq4VlJuaExnc01BWEE/view?usp=drivesdk

but a slight rewrite to this will be fine:
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://0B92r6EdKIYq4VlJuaExnc01BWEE

we can do the later automatically.

what I did?

Download the Zip file from Github https://github.com/ChromeDevTools/timeline-viewer.git

And I moved to the folder and run npm i

And Run npm run dev as in the screenshot but getting the following error.

Could anyone help me in running the timeline viewer in my local?. Thanks in advance for any help

Using Node v7.9 and npm v4.2 in mac

Following up on #85

I was able to clone, and build the devtools-frontend project locally and I can get the UI to show on a dev server from the generated out/Default/gen/front_end folder.

I am trying to load this page with some default data and I tried to do this -

<!--
 * Copyright 2018 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
-->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>DevTools</title>
<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: rgb(41 42 45);
    }
  }
</style>
<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
<meta name="referrer" content="no-referrer">
<script type="module" src="./entrypoints/richter_app/devtools_app.js"></script>
<script>
  window.onload = function () {
    window.Root.Runtime.loadResourcePromise('https://gist.githubusercontent.com/40x/5db77759abc4aafc74c8da7d70d718a5/raw/516df060ca1d3586068be0651b98c02803592705/gistfile1.txt')
  }
</script>
<body class="undocked" id="-blink-dev-tools">

When the UI loads the API call is dispatched and the response is available but nothing is really displayed on the UI. I was wondering if anyone could give me an assist with the next steps here?

I tried to open the following link:
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://1kj9M7frgskdtlWH_eMFDwuT8USgOte9w

Which takes me to a page that isn't obviously trying to load a file - but then I spot the green button for GDrive API access, so I figure that should make things work, and click on it.

However the prompt I get tells me that I need to provide access to rather a lot, when I'm only trying to view what I'm pretty sure is someone else's public file.

This app wants permission to access everything in your Google Drive. It will be able to do the same things that you can do, including:

From the permissions dialog:

See your files
Upload and download your files
Delete your files
See the names and emails of people that you share files with
Share and stop sharing your files with others
Remove people from your files
Organise your Drive
There may be private information in your Google Drive, like financial records, medical reports, photos or tax info.

I suspect this might be a limitation of the google drive api itself? I know the source code is auditable, so this is probably safe to give away, but I figured I'd record the issue anyway.

Issue:
With the chrome 80 release the timeline viewer no longer works.

things i've tried to fix
I've attempted to debug and fix locally but haven't had any luck (yet). The version of shelljs and dev_tools_app.js are outdated and use native methods that were dropped with the release of v80.

So far I've attempted updating the hash on line 74 and 75 in docs/index.html here
. and the createSetting methods in docs/dev_tools.js
but haven't had any success yet.

I'm happy to keep hacking on this, but would <3 some help or direction.

Relevant logs from the console:
shell.js:3123 Uncaught TypeError: document.registerElement is not a function at Object.UI.registerCustomElement (shell.js:3123) at shell.js:3135 at shell.js:3137 devtools_app.js:2 Uncaught ReferenceError: SDK is not defined at devtools_app.js:2 treeoutlineTriangles_2x.png:1 Failed to load resource: the server responded with a status of 404 () ?loadTimelineFromURL=https://gist.github.com/paulirish/f83d30384954937dc3a1fae970a4ae52/raw/b25b27741c652d3091a316dfd8b58bf72f14aa74/twitch.json:1 A cookie associated with a cross-site resource at https://accounts.google.com/ was set without theSameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. ?loadTimelineFromURL=https://gist.github.com/paulirish/f83d30384954937dc3a1fae970a4ae52/raw/b25b27741c652d3091a316dfd8b58bf72f14aa74/twitch.json:1 A cookie associated with a cross-site resource at http://google.com/ was set without the SameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. ?loadTimelineFromURL=https://gist.github.com/paulirish/f83d30384954937dc3a1fae970a4ae52/raw/b25b27741c652d3091a316dfd8b58bf72f14aa74/twitch.json:1 A cookie associated with a cross-site resource at https://google.com/ was set without the SameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. dev_tools.js:59 Uncaught TypeError: Cannot read property 'createSetting' of undefined at dev_tools.js:59

It's minor for now... just not to forget...