How to Take Screenshots with Google Chrome Browser?

When you want to move from Firefox to Chrome, you will notice one of the important feature is missing in Chrome. Yes, that is taking screenshots or capturing the browser screen directly from the browser itself. Firefox Quantum has superb and enhanced screen capturing feature. We believe Google should come up with equivalent feature in the later Chrome versions. Till the time, you have no direct option other than following this trick to take screenshots in Chrome.

How to Capture Screen in Chrome?

Follow the below instructions as there are no direct options in Chrome.

• Open the website you want to take screenshot. Go to “View > Developer > Developer Tools”. On Windows you can press F12 to open developer tools or press “Control + Shift + I” to open developer tools section. On Mac use the shortcut keys “Option + Command + I”.
• Click on the “Toggle device toolbar” button to open the responsive mode option showing the mobile view of the site.

• Now click on the three dots button. There will be three buttons one is next to address bar, second is below the address bar and third is in developer tools section. You should click on the second button as shown below.

• You will see two options in the menu – Capture screenshot and Capture full size screenshot. The capture screenshot option allows you to take the visible portion of the site shown on the browser. Click on that to take the screenshot of the visible content on the browser. The screenshot will be downloaded instantly and available in the downloads folder on your computer. The image will be with in PNG format by default.

• You can select any of the available device and get the mockup screen easily with Chrome screenshot option. You can also toggle device frame, by choosing show/hide device frame option in the menu. When you hide the frame, the same option will show like “Show device frame”.

• Now, click on the “Capture full size screenshot” to take the full website screenshot from top to bottom. This image will be large in size depending on the length of the webpage. It will be very useful to check the alignment of the site’s design on different devices.
• In both cases, the screenshot will be downloaded to your “Downloads” folder as a PNG image file.

The advantage over Firefox is that you can take the screenshot with device frames like mockups in iPhone. Also you can use any standard or set custom dimensions and rotate the device frames for your screenshot.