[Profile] Open chrome tracer with browser

[dayo09]

What?

Let's try opening chrome tracer with browser, especially when ssh-connection.

Why?

To check if deprecation of json-tracer is okay.

[dayo09]

Related library

https://www.npmjs.com/package/opn

• Open stuff like URLs, files, executables. Cross-platform.

• MIT license
• Support cross-platform url opening
• Includes the latest xdg-open in linux

[yunjayh]

vscode chrome trace viewer extension opens http server with temp directory.
Since perfetto can be loaded with file's uri as it's parameter, it does works.
(https://ui.perfetto.dev/#!/?url=http://127.0.0.1:9001/trace.json will open my trace.json via perfetto)

[hyunsik-yoon]

@yunjayh Good info.

I tried to find more info about perfetto.

https://perfetto.dev/
"Runs fully in your browser"
"No server interaction involved, works even if you are offline"

https://perfetto.dev/docs/#trace-visualization
"The Perfetto UI works fully offline after it has been opened once. Traces opened with the UI are processed locally by the browser and do not require any server-side interaction."

[hyunsik-yoon]

• Similar try in android source code (Apache 2): https://cs.android.com/android/platform/superproject/+/master:external/perfetto/tools/open_trace_in_ui;l=58-76.

• In SSH-Extension env, the IP should be ubuntu machine's IP.

• Like shown in this code, it opens web server without considering CORS. (https://evan-moon.github.io/2020/05/21/about-cors/)

• Another way around could be this one.

• I wonder if opening temporal web server could be secure or not. However, there are some programs that opens web server: e.g., Tensorboard.

[yunjayh]

Thank you for your detailed research!!!!

• I wonder if opening temporal web server could be secure or not. However, there are some programs that opens web server: e.g., Tensorboard.

+1 to this thought. But, as you can find in the main comment of this issue, I'm not sure how to solve the problem in case of using ssh-extension.

[dayo09]

I'm not sure how to solve the problem in case of using ssh-extension.

Same here..

I tried porting vscode chrome trace viewer extension.
It works well locally but not with ssh-extension

[dayo09]

FYI, they say

• embedding with iframe is not supported, and never planed to, because of security reasons :link
• vulcanization is not supported, not planned either :link

[dayo09]

Opening the main page is okay:

Because npm/open is a cross-platform network tool, we can open the ui.perfetto.dev main page in both local pc and ssh.

However, Loading the file is...

It seems they only provides an api of https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui.
It assumes 'javascript, page-to-page communication'. Therefore assumes window.open and Window.postMessage apis. We should

(1) wait for the page to be ready
(2) put postMessage() with a buffer of our trace data

I am trying to find if there is any workaround, trying such things as 'window-post-message-proxy'...

[dayo09]

Opening the pages via webview: impossible

vscode doesn't allow webview to open an url outside. They intentionally blocks modals.
window.open() <- impossible within webview, too.

[llFreetimell]

After seeing your huge efforts... I think this issue cannot be achieved before release T.T
(I even failed to open main page on the panel...)

[dayo09]

@llFreetimell

It seems 'perfetto' has blocked itself from 'iframe', for a security reason. AND, vscode extension api document says 'webview' is a kinda 'iframe'. So it shoudn't show up.
I only succeeded in opening the main page on the browser, too...

[dayo09]

To summarize so far,

(1) perfetto maintainers don't aim to support 'vulcanization'(synthethically embedding into other project) because of security reason.
(2) vscode extension basically supports embedding by iframe(which is absolutely not supported by perfetto). - they don't allow pop-up on webview, too.

Therefore, embedding looks to be impossible.

[hyunsik-yoon]

Thanks for @dayo09's work.
I will also spend some time figure this out. :-)

[hyunsik-yoon]

Can we open a json in Chrome Tracer without clicking load button?

• https://stackoverflow.com/questions/49147681/load-json-manually-in-chrome-tracing
  • Automate the drag & drop could be implemented
    • We need Javascript knowledge
    • Handling json file in SSH Extension env is still questionable

[hyunsik-yoon]

1. a single linux box (not SSH-extension env)

• When I try open(https://ui.perfetto.dev/#!/?url=http://127.0.0.1/trace.json), perfetto shows the file really well.

2. SSH-extension env
   I put json file in my linux PC (IP is, say, 10.11.12.13).

• open(http://10.11.12.13/trace.json) works and my browser shows raw json file. So there seems no company-internal-complex-network issue.
• open(https://ui.perfetto.dev/#!/?url=http://10.11.12.13/trace.json) fails. perfetto web site shows "Oops, something went wrong. Please file a bug. (Googlers only)" message.

Other way around to use perfetto is using popup window (window.open()). @dayo09 already found that this didn't work either in vscode (#1093 (comment)).

It seems like perfetto is not an option.

[dayo09]

Other way around to use perfetto is using popup window (window.open()). @dayo09 already found that this didn't work either in vscode (#1093 (comment)).

It seems like perfetto is not an option.

So it came to the same conclusion. Let's go with #1135 instead.