In our usual work, we have many ways to take screenshots of web pages in browsers. Both Windows and Mac operating systems have their own screenshot tools. However, if the web page we open is very large, I will be unable to use the screen capture tool that comes with the operating system, because our display screen cannot display all the content of the web page. At this time, we need to use special tools to take screenshots.
Below we introduce how to use the Chrome browser to obtain a screenshot of this web page.
Step1: Open the web page
For example: https://cn.bing.com/
Step2: Open "Developer Tools"
Step3: At this time, press Ctrl + Shift + P on Windows system (⌘Command + ⇧Shift + P on Mac system), and the following interface will appear
Step4: After entering Capture after Run>, 4 screen capture methods are prompted, as shown in the figure below:
-
Capture area screenshot
-
Capture full size screenshot
-
Capture node screenshot: requires data front-end knowledge, that is, only captures the display content of a node in HTML
-
Partial screenshot of the current page display (Capture screenshot)
Step5: Find one of the 4 screenshot methods, such as Capture full size screenshot, because I want to screenshot all the displayed content of the web page, as shown in the following figure:
As you can see, the picture is automatically generated and downloaded to the default browser download directory.
Step6: Open the picture, let us see the effect, it shows all the content of the page, not just the content displayed on the screen.
