27

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?

chris
  • 36,094
  • 53
  • 157
  • 237

3 Answers3

29

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.

Mike West
  • 5,097
  • 25
  • 26
  • Hi Mike, the HAR Viewer chokes on the logs I paste in it. This could be specific to the version of Chrome I am using or to HAR Viewer version, but ... could you name some of the other tools you think of? Google didn't help. Thanks. – Gabriel R. Jun 03 '11 at 08:30
  • 1
    Hi Gabriel, there are a few bugs in HAR support that we're working on fixing. If you tell HAR Viewer to skip validation (it's a checkbox), then you'll get a mostly accurate view of the log file. The missing fields should be wrapped up in a future release, but for the moment this is the only workaround I can offer. – Mike West Jun 04 '11 at 09:07
  • Funny thing is that my logs don't work in HAR Viewer, regardless of Validation, but some of those I receive by mail from others do. So i'll be fine. – Gabriel R. Jun 11 '11 at 21:57
  • If you can reduce the error, please file a bug http://new.crbug.com/ and let me know about it. I'll make sure it's triaged into the right team (or filed against WebKit, since that's likely where the problem lies). – Mike West Jun 12 '11 at 12:32
  • This functionality seems to be gone in recent versions of Chrome. Attempting to "Copy as HAR" returns a message "You need to install a Chrome extension that grants clipboard access to Developer Tools" - yet no such extension seems to be readily available. – TomG May 13 '13 at 20:48
  • In Chrome 38.0.2125.111 I have to select the rows of the graph by dragging over them; then right-clicking I get "Copy all as HAR" and "Save as HAR with content". – Pino Nov 11 '14 at 10:42
1

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

  1. 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.

  2. You need to copy this by right clicking on the <html> tag and selecting "Copy as HTML".

  3. Paste this into a text editor and save as an html file.

  4. 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

  5. Change the locations in the <head> tag in the saved html to point to these files.

  6. 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.

  7. 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.

Ben Lynch
  • 189
  • 2
  • 2
  • 12
  • You can no longer Inspect Dev Tools Element in Version 23.0.1271.97 (I only tested this version) on Ubuntu 12.04 :( – Radu Maris Jan 07 '13 at 13:10
  • You can still inspect the dev tools you just have to use the chrome://inspect page instead of the context menu: http://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome/13568896#13568896 – Helder Roem Apr 02 '13 at 15:34
0

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!

Fergal
  • 5,213
  • 6
  • 35
  • 44