CODEWITHSUNDEEP
performancegoogle-chromegoogle-chrome-devtools
Aidar Gatin
Aidar Gatin

Reputation: 843

How to get screenshot from chrome dev tools performance frame

Using Chrome dev tools, how to get exact screenshot at exact time to share

check Chrome devtools Performance frame, gif animation

Upvotes: 20

Views: 12529

Answers (1)

woxxom
woxxom

Reputation: 73716

Open devtools-on-devtools:

  1. switch devtools docking mode to a separate window in the devtools settings three-dot icon.
    (when this option is activated you can use CtrlShiftD to toggle docked/undocked state)
  2. invoke devtools-for-devtools by pressing CtrlShifti in windows or ⌥⌘I in mac when devtools window is focused

Now, in this new devtools-for-devtools window:

  1. open Application tab
  2. expand/open Frames - top - Images
  3. click any image URL on the left to view it
  4. right-click the image itself and choose Save
  5. repeat 3-4

enter image description here

To find the URL of currently shown screenshot:

  1. click the corresponding green bar in Frames strip under screenshot thumbnail strip
  2. use element selector CtrlShiftC in devtools-for-devtools and click the mini-screenshot at the bottom of the main devtools window
  3. now devtools-for-devtools will show <img> element in the Elements tree, rightclick its data:image/png and Open in Application panel, then save it.

Notes:

  • The images are 256 kilopixel i.e. approximately 500x500 px. This is hard-coded in devtools.
  • To increase the scale of the content in the output image, resize the window before recording, so that the aspect ratio of the window matches to aspect ratio of the output image (1:1 in this case), suggested by JBress in the comments.

Upvotes: 41

Related Questions