How to get screenshot from chrome dev tools performance frame

柔情痞子 提交于 2019-12-04 17:31:42

问题


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


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


来源:https://stackoverflow.com/questions/44182882/how-to-get-screenshot-from-chrome-dev-tools-performance-frame

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!