Chrome browser-developer tools screenshot dry goods

Google browser installation package (executable file-click here to download and install directly) [chrome80 (80.0.3987.100) pure without plug-ins]

  • Use the shortcut key F12 to call up the developer tools, you can also right-click the mouse, and then find the inspection element, enter the developer tools

Insert picture description here

  • Use the shortcut key Ctrl+shift+P to open a window where you can enter commands to find files

Insert picture description here

  • Then enter: Capture full size screenshot , which means to capture a screenshot of the entire network page
  • Then the Chrome browser will automatically grab a screenshot of the webpage, and then save the screenshot of the webpage locally
    Insert picture description here
  • If you only want to take a screenshot of the content of the page,
    then you can directly enter: Capture screenshot to capture the content information of the current page of the screen

Insert picture description here

  • If you want to simulate the screenshot of the mobile version on the computer,
    you can click on the icon in the upper left corner of the developer tools to switch devices.
    You can also use the shortcut key Ctrl + Shift + M

Insert picture description here

  • And we can set the size of different mobile phones to imitate different mobile phones to capture long pictures,
    and then take the mobile version of the long pictures in the same way as above.
    Enter Capture full size screenshot

Insert picture description here

Guess you like

Origin blog.csdn.net/GodOuO/article/details/105186035