Is there any way to export time graphs from Chrome developer tool?_问答_开发者

Is there any way to export time graphs from Chrome developer tool?

开发者 https://www.devze.com 2023-02-03 17:44 出处：网络

I\'m using the Chrome developer tools to review a web site for开发者_运维百科 a client, and it would be nice if I could export the results of the time graph.

I'm using the Chrome developer tools to review a web site for开发者_运维百科 a client, and it would be nice if I could export the results of the time graph.

Is that possible?

Assuming that you're referring to the waterfall chart output in the network panel, you can right-click on the chart's header (or any empty space in the chart itself), and select "Copy network log as HAR" to pull the chart's data into your clipboard.

HAR is a format that lots of tools understand; to generate a nice waterfall chart to discuss with your clients, take a look at something like HAR Viewer. I think that will meet your needs.

This isn't exactly simple but seems to work well enough!

First you need to get the timeline up in the Dev Tools and right click somewhere on and "Inspect Element". This will open another version of Dev Tools, with the HTML available.
You need to copy this by right clicking on the <html> tag and selecting "Copy as HTML".
Paste this into a text editor and save as an html file.
View the following urls in Chrome and save these files to the same place as the html file. chrome-devtools://devtools/DevTools.js chrome-devtools://devtools/devTools.css
Change the locations in the <head> tag in the saved html to point to these files.
Save all the images in the resources tab in an "Images" folder in the foot of where this file is. This will take ages, sorry! I think these would all be contained within the Chrome "resources.pak" file which is in Chromes installation directory, however I couldn't find an easy way to extract it.
Viewing your HTML in a browser should show you what you need, obviously once you have extracted the resources, js and css, you can simply copy and paste different versions of the timeline to different HTML files.

If you want a quick and easy way of capturing the data on the network panel you can right-click on any row in the displayed data, select all then copy and paste the contents into Excel.

Excel actually does a good job of capturing the tabulated layout of the data, plus once in Excel you can manipulate the data according to your needs.

One drawback is that it doesn't capture those neat waterfall graphs produced in Chrome but I guess Excel's graphing capability could make up for that!