How do I access DevTools waterfall?

87 views
Skip to first unread message

Adam Gardner

unread,
Dec 30, 2023, 8:47:08 AM12/30/23
to Chromium Extensions
I'm trying to access the raw information contained in the "waterfall" UI.

I can get some of the info with this:

chrome.webRequest.onCompleted.addListener(info => {
console.log("[onCompleted] Request finished: " + JSON.stringify(info));
//urls.set(info.requestId, info.url);
}, { urls: ["<all_urls>"] }, ["extraHeaders"]);

I have this Python code which takes a .HAR file (output from DevTools) and translates it to OpenTelemetry. Now I'm trying to bypass the "output as HAR" step and pull these timings directly from DevTools using an extension (which I realise I will need to rewrite in JS).

Side note: If anyone wants a project, I'd 100% open to experienced collaborators on this extension.

Patrick Kettner

unread,
Jan 2, 2024, 1:16:26 PM1/2/24
to Adam Gardner, Chromium Extensions
Hi Adam,
There isn't an API to get the waterfall itself. Extensions do have chrome.debugger, however. This gives you access to the Chrome DevTools Protocol. This is the same protocol that devtools uses to generate the waterfall. I am not familiar with the intricacies of the network tab, but a while back the devtools team added a Protocol Monitor inside of devtools that can help you figure out what calls do what. It is still experimental, so you will need to enable it manually. You can do it by opening devtools, hitting the ? key on your keyboard to bring up settings, selecting Experiments on the left hand menu, and then searching for Protocol.
Once you enable it, you can click on the devtools menu ( the ⁝ button) > More Tools > Protocol Monitor to add it as a new tab on your drawer. From there, you can see all devtools protocol calls.
You would be able to build a waterfall using information from the Network portion of CDP. Checking briefly, I see them using Network.dataReceivedNetwork.getResponseBodyNetwork.loadingFinishNetwork.loadingFinishedNetwork.requestWillBeSentNetwork.requestWillBeSentExtraInfoNetwork.responseReceived, and Network.responseReceivedExtraInfo

patrick

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/fe8cbc4d-6dcd-4f88-b5f8-b3eedfec9416n%40chromium.org.
Reply all
Reply to author
Forward
0 new messages