Take long screenshots of webpages with Chrome Developer Tools

I wrote a section of Markdown that I want to export as a picture, but unfortunately the quality of the pictures exported by Typora does not meet the requirements. Then try to export to PDF first, and then convert to pictures, the result is still not ideal. Finally, I tried to export to HTML first, and then take a screenshot of the page, the effect is very good. Write this article to record the solution.

First call up the Chrome Developer Tools interface, you can use the shortcut key (Win is F12), press Ctrl+ Shift+ to Pcall up the command search bar, enter Capture in the search bar to see the screenshot related options:

A brief description of several Capture options:

  • Capture full size screenshot can achieve long screenshots. The screenshot of the webpage is the same as the layout status of the webpage you are currently viewing, which means you can adjust the zoom ratio of the webpage to control the final effect of the desired screenshot.
  • Capture area screenshot to achieve selection of screenshots, click and select to select.
  • Capture node screenshot implements a screenshot of an HTML element.
  • Capture screenshot implements a screenshot of the current viewport.

In addition, the developer tool interface may squeeze to the main page to be screenshot, but can not achieve the desired effect. At this time, the developer tool interface can be separated as a separate window:

If you want to take screenshots on mobile devices, you can click:

Guess you like

Origin www.cnblogs.com/wyzersblog/p/12691039.html