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

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 when devtools window is focused,
   and do the following 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.