Taking a screenshot of a website you’re visiting using the Chrome/Brave browser dev tools is a simple process. Start by opening the dev tools panel with a quick key combination: Ctrl + Shift + I.
Next, you need to enable the device toolbar in the dev tools window. To do that, toggle it on by clicking on the device toolbar icon or pressing Ctrl + Shift + M. If the device toolbar icon is already blue, it is already toggled on.
Now, look for the down arrow highlighted below and click on it to reveal a menu.
When the menu appears, you will see two options for capturing the screenshot of the page you’re on.
The first option
Capture screenshot – This captures the viewport, which is the visible section of the web page.
The second option
Capture full screenshot – This captures the entire website page from top to bottom.
Before capturing, remember that you have full control over the page dimensions. Click on the Dimensions menu dropdown to select the dimensions that suit your needs.
Select the device you want. In the picture below, I have chosen the iPhone 14 Pro Max. This selection will simulate the website’s appearance on the selected device.
You can also use a custom dimension by selecting ‘Responsive’. This option allows you to enter the specific dimension you want in the fields next to the menu.
After taking your screenshot, you can close the browser dev tools by clicking the close icon below.
