How to get screenshot from chrome dev tools performance frame

Question

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

Answer 1

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

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.