Menu
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?
237
In Chrome, the ability to export the Network panel is built in. Open the Developer Tools, click on the Network panel, then right-click anywhere within the panel and choose "Save as HAR with Content" to export the panel to the file system.
Chrome/EdgeSelect Tools > Developer Tools. The Developer Tools window opens as a docked panel at the side or bottom of Chrome. Click the Network tab. Select Preserve log.
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.
50
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
