chromedevtools / timeline-viewer Goto Github PK
View Code? Open in Web Editor NEWView DevTools Timeline trace files from Google Drive wicked easily
Home Page: https://chromedevtools.github.io/timeline-viewer/
License: Other
View DevTools Timeline trace files from Google Drive wicked easily
Home Page: https://chromedevtools.github.io/timeline-viewer/
License: Other
it'll be much faster to load.
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.
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
Linking to GoogleChrome/lighthouse#1910
Then publish this tool to npm,
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?
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?
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
Thinking something like drive://
:
https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://0B222_LMZAKv7eU1vX05rTAdCbXM
This could then be extensible for dropbox or gists.
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?
Load two traces at once. Do a split so you can compare them.
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 ๐
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.
/trace/upload
{"traceEvents":[
)/traces/<UUID>
I'm open to all ideas on the above. :)
It's minor for now... just not to forget...
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?
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
timeline-viewer/docs/dev_tools.js
Line 154 in f3e7ce0
dragenter
, dragover
, drop
event on window.Timeline.TimelinePanel.instance()._dropTarget._element
nothing happens.
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 :)
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.
Is there a wasm gunzip we can use?
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.
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 :)
What if add some controls
Like:
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?
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
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
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.
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.
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.
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.
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
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 ๐ฅ ?
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 the
SameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with
SameSite=Noneand
Secure. 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 with
SameSite=Noneand
Secure. 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 with
SameSite=Noneand
Secure. 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
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
The motivating user story
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.
Recently, I've been trying to upload large trace (246.8 MB) and window crashed...
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
.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.