Abstract: This article will tell you how to achieve perfect screenshots without installing third-party software
As a front-end engineer, sometimes you need to send a half-finished page to the PM and Designer to get their feedback. The Mac’s built-in screen capture function only captures what is displayed on the screen, but web pages are often too long to capture the entire page at once.
The simplest and most crude solution to this problem is to manually swipe the page to capture multiple images and name the file according to the sequence of images. However, to do so, the PM and Designer need to be opened one by one, and they will not see the whole effect. So, this is only indirectly passing the problem on to others, but does not solve it fundamentally. A qualified engineer should explore a better solution.
When encountering such problems, I explore them in sequence: native solution > combination of existing tools > installing a browser plug-in or App.
Since native Mac screenshots didn’t solve the problem, I tried a combination of existing tools: splicing multiple screenshots together in Photoshop before sending them. The downside is that it takes a lot of time, especially when the page is still semi-finished, and often needs to be changed repeatedly. For example, the following is PM’s feedback. After making changes, you have to go back to Photoshop again, which is inefficient and repetitive. Software engineers don’t like repetitive work.
Hackers (and creative people in general) should never be bored or have to drudge at stupid Repetitive work Become A Hacker
Since plan 2 was too time-consuming, I began to consider Plan 3, installing a browser plug-in or App. A simple search reveals that there are many such products and the cost of choosing is high.
So, back to the idea of continuing to explore native solutions. At this point, it turns out that Chrome has added the ability to take screenshots in a recent release. Here is how to obtain the entire LinkedIn home page as an example.
Use Chrome’s developer tools to capture the entire page
-
Open Chrome and go to the page for capturing the screenshot
-
After the page loads, open the developer tools using the following method
- Right-click anywhere on the page and select the “Inspect” option from the pop-up menu
- Or use the shortcut key combination:
Alt+Command+I(Mac) |Ctrl+Shift+I(Windows)
-
Use shortcut key combination to open a command line (command palette) : the command + Shift + P (Mac) | Ctrl + Shift + P (Windows)
-
Type “Screen” on the command line, and autocomplete will display some commands that contain the keyword “Screen”. Move the arrow key to “Capture Full size Screenshot” and enter (or just click the option with the mouse)
There are gifs at the end of the article to illustrate the steps
After that, Chrome will download the screenshot to a specific download area on your computer.
Extended Application Scenario 1
Due to the rise of Responsive Web Design, the display effect of many websites on mobile browsers is different from that on computers. Using Chrome developer tools, you can also achieve the screenshots of the whole page of different mobile phones:
- Go to the page of the site where you need the screenshot and open the developer tool (same as above)
- Click the View Transform button in the upper left corner of the Developer tools, and the page in the browser will present the mobile view. You can also select different phone or tablet models in the browser to compare how the page looks on different hardware
- Reload the page
- Open the command line and take the screenshot command (same as step 4 above)
Extended application Scenario 2
If you don’t want to capture the entire page, but some elements of the page, you can use developer tools to do this. Take the following example:
- Go to the page of the site where you need the screenshot and open the developer tool (same as above)
- Click the “Select Element” button in the upper left corner of the Developer tool and click the element you want to capture from the web page
- Because of the nesting of HTML parent-child elements, it is possible to select a child element that requires a screenshot element. In this case, you need to adjust the selected element in the developer tools: since the selected element is a child, you only need to find the appropriate parent element in the “Elements Tab” next to the “Select Element” button. At this point, click to select the parent element.
- Open the command line and perform the screenshot command (similar to step 4 above). Please note that in the command that contains the keyword “Screen”, select “Capture node screenshot” from the Screen Screen screenshot Screen” instead of “Capture full size screenshot”.
Afterword.
When I started writing this article, my initial idea was to write an expository article in the form of a Baidu experience or wiki how to. However, when introducing a solution to a problem, it is more valuable to introduce the idea of solving the problem, so that readers can use similar ideas to explore the answer when they encounter similar problems in the future. In addition, I also want to share with you how programmers think and work. How To Become A Hacker
If you find this article helpful to you or someone around you. You are welcome to like, leave a message, forward or follow me, these behaviors are a great encouragement for me to continue writing!
LinkedIn Web Front End Engineer, New York City. An active member at the intersection of technology and humanity. For more information, please follow @Vagrant Lado on Sina Weibo
Two Chrome feature updates:
-
What’s New In DevTools (Chrome 59)
-
What’s New In DevTools (Chrome 62)
In order not to affect the reading experience, put the GIF at the end of the article:
