Full Page Screenshots for Website in Browsers
Who doesn’t know? You want to create an image from an entire website, but you can usually only virtually photograph the visible area. It’s actually pretty easy to take screenshots of a website from your browser, including the areas you can reach by scrolling.
Screenshot with Firefox
Firefox makes it by far the easiest way to take such a full-page screenshot. The process is extremely user-friendly and you don’t need extensions to easily photograph the website:
1. To do this, click on the three dots in the URL bar and go to “Take a Screenshot”:
2. In the next step, you can then optionally photograph the individual elements of a page virtually by hovering over it and clicking on the respective area.
3. In the very last step, a window opens, in which you actually only press the blue “Download” button. The file is then usually shipped to the Downloads folder and stored there. Unless you have defined another default folder.
And that’s it. Surgery succeeded, patient lives. Now let’s look at the process in Chrome next.
Screenshot with Chrome
In Chrome, unfortunately, it’s not as easy as Firefox. This will certainly not be a problem for developers, as they are already familiar with Chrome’s DevTools. For not so savvy users, however, it is probably rather inaccessible, and you have to get used to the process first. And it goes like this:
1. You access the DevTools menu in Windows via CTRL + SHIFT + I, (in Mac via CMD + ALT + I). The following overview appears:
2. In a second step, enter d in Windows CTRL + Shift + P, which calls an input field that looks like bellow.
3. Finally, you write the word “Screenshot” in the input field, which displays some options. What you need is “Capture full-size screenshot”.
So you click on this now, and after a few seconds, an image of the entire website is downloaded to the Downloads folder. Finished. If this is too complicated for you, the screenshot functionality is also available for you as a Chome Extension.
For the sake of completeness, we take a look at the Safari browser.
Screenshots with Safari
In Safari you can also take a screenshot about the “Web Inspector”, which you can access via CMD + ALT + I in Mac. Here you only need another mouse click on “Capture Screenshot”, and in no time the file is in the Downloads folder. If you don’t like such developer tools, you can also use Awesome screenshot extension.
What are your favorite extensions or tricks to take such screenshots? Write it down in the comments! We will include the best tips in the article.
Rahaf Ebraheem Itechonics - Web Developer