Screenshot the entire web-page
Safari now has a ScreenCapture feature built-in, as explained in the article Full Page Screenshots in Browsers:
In Safari DevTools, select a node, right-click, and you'll see Capture Screenshot in the context menu.
There isn't a keyboard shortcut AFAIK, but it is available without additional third-party software. To capture the entire page, you would right-click on the <html>
or <body>
node, as demonstrated in this image from the CSS-Tricks article:
Update: Safari introduced a feature accessible via the developer tools, which lets users capture screenshot of the entire webpage. This feature was not available at the time the answer was written. The original answer is kept as is for reference.
For Safari, refer to the answer by shawncampbell.
But, are there any keyboard shortcuts that can scroll a webpage or any other pages and get the screen capture?
No, there's no built-in mechanism in Safari/macOS to scroll and screenshot an entire webpage.
You'll either need to manually scroll, snap and stitch the images or write a script, both of which could be cumbersome.
You can do a Web search and find 3rd party Safari extensions that can perform this function for you, but again that's not what you are looking for.
If you relax the scope and are willing to download a software from the Internet, you can install Mozilla Firefox, a popular alternative Web browser for macOS. A screenshot tool, aptly named Firefox Screenshots is natively built into the web browser.
Download and install Firefox, open the desired Web page, click on the Page actions button in the address bar and select Take a Screenshot option.
You can choose between capturing the entire page,just the visible area or a specific region within the visible area.
What's great is that you can choose between downloading the generated image right away or save them online for later access (Do note that as per the linked support article, screenshots are saved for 14 days only). You can also copy the image directly to the clipboard or edit it in the browser itself.
Here's the Ask Different Web page in it's full glory :)
In my opinion, this is the most hassle free approach one can take to screenshot a Web page in macOS.
Run brew install webkit2png
and then run a command like this:
webkit2png -F -W 1280 https://apple.stackexchange.com/questions/334689/screenshot-entire-web-page
-F
creates a full-size screenshot. -W
changes the width of the browser window (the default is 800).
Understanding the OP doesn’t want third party tools, many others will want this, so there are a couple of easy ways to do this using a mac.
- Paparazzi! app - opens a window. Just paste the URL to capture the entire web page. The File menu has "Save Image As" to save the whole web page. With tools like folder actions, you can then print, file, or do whatever you wish with the images.
Web sites provide this service as well - no software required. One is web-capture.net. Also, paste your URL to receive an image type of your choosing. This easily prints or downloads as a zip file.
Awesome Screen Capture is an extension that provides a simple way to capture the entire website.
I managed to take the entire page image of the website (on Safari) by clicking through: File > Export as PDF.
Though not PNG, the PDF did the job for me, since all I really wanted was some form of the capture of the entire webpage.... best!