Take Screenshot of Full Webpages in Chrome

Chrome has a mode called Developer Tools that allows you to basically peek under hood to see how Chrome works to a certain extend. An average person would never need to do wander to this area. However, these are times when you need to do things like capturing an entire webpage. There are add-ons for Chrome that let you do this, but if you don't want to use them, you can do this in Chrome's built-in Developer Tools. The process is pretty straight forward.

On a PC, click on the 3 vertical dots at the upper right corner of Chrome. This is where you go to do customization of Chrome.

Move and hover the mouse cursor over More Tools.

A second box appears. Click on Developer Tools. You can get here with a 3-key keyboard shortcut of ( Control + Shift + I )

The screen will split into 2 columns. The left column is whatever webpage you are on at the moment. The right column shows you what is going on under the hood that tells Chrome to display the webpage on the left. This webpage is not a static picture but a live page. That means you can actually interact with the elements in it. However because of the screen split, the page appears small making any interaction difficult.

Look at the top horizontal menu in the left column. Click on the word Responsive, and you are presented with a list of devices. This allows you to see what this particular webpage looks like on a particular real world device. You can also customize the width of the screen by dragging the 2 parallel bars on the right side of the webpage. The layout of the webpage will change, adapting to the changing widths that you specify. Once you are satisfied with the layout for your desired screenshot, click on another 3 vertical dots on the upper right corner of the left webpage column. (These 3 dots are not the same 3 dots mentioned earlier).

Choose Capture full size screenshot.

Alternatively, click on the 3 dots on the right, next to the window-closing X.

Click “Run Command.”

In the command line, type “Screenshot,” then click “Capture full-size screenshot” from the list of commands available.

Choose Capture Full Size Screen Shot. Chrome will do the capture and save the resulting picture as a download. Note that the dynamic layout of the webpage is not available for all webpages. It all depends on how compliant are the computer codes used to display the webpage. Many webages are so poorly coded that Chrome does not know how to shuffle around the layout as the screensize is changed. Website creators use this feature in Chrome to test their creation to maximize accessibility on various screen sizes. If you don't want to do any customization of the screen size, I find the preset of iPad Pro is the best middle ground that produces the best screenshot for screen and print out.

HEIC Format

Currently, there is no popular image displaying program on Windows to open picture files including the new iPhone-centric HEIC format. However, it's a matter of time when this issue will be resolved either by one such program becoming available due to the sufficient popularity of this file format OR the HEIC never catches on and be deprecated by Apple.

In the meantime, you can tell the iPhone to take pictures in the old JPG or PNG format in the phone's Settings. At the same time, go here to read a bit about this issue including using a utility the article recommends to convert all the existing pictures from the HEIC format to either JPG or PNG.

https://lifehacker.com/how-to-easily-convert-your-iphones-heic-images-in-windo-1826327599
https://imazing.com/heic

I recommend that you convert the HEIC pictures to PNG format and not JPG because the PNG is "lossless" which means its compression algorithm does not throw away any useful visual information in the picture. This is needed when the pictures are printed out, especially with dedicated photo printers, the files have the needed meta data to reproduce accurate colors.