Screen Capturing

Full-size screenshots

For years I have relied on Google Chrome's dev tools to handle most of my screen shot needs. This tool has been invaluable. I do not trust extensions to perform this task and suspect a popular screen shot extension I used around 2014 became malignant/adware. This experience prompted me to inspect extension source code more carefully and alerted me to how little vetting happens in most plug-in/extension ecosystems. Thus, this feature being natively provided is part of what makes it invaluable.

1. Open develop tools (Ctrl + Shift + i)
2. Open command menu (Ctrl + Shift + p)
3. Search "screen"
4. Select "Capture full size screenshot"

Beginning in 2023, Chrome has removed this feature! It can be re-enabled via chrome://flags (search for "screen"), but its future looks grim. More in this video. It appeared there was some attempt to pull this into the Chrome UI, and user feedback against it was bad? Would those users be happy it is removed entirely? Why would it be removed as a hidden dev tool, where devs are more practiced in tweaking pages? Here is the merge to delete the feature from 7 Feb 2023.

Tricky cases

Sometimes a full size screenshot attempt will fail for a variety of reasons. Some cases are listed below:

Case	Description
Sticky elements	Elements that stay fixed in place often screen shot poorly in full-screen captures. I will sometimes try to fix them in place, but often the best solution is to delete them from the DOM.
Frames	The core struggle with frames is that they are often rendered from an absolute position within a relative parent, with an explicit width and height. In the case of CodePen, the pen's code is written dynamically to an iframe using a srcdoc attribute (you need to go to the URL of the iframe first... it's an iframe IN an iframe). By turning off all flex and overflow behavior on the body, and explicitly setting the iframe height to something like 1000%, you can capture a full-screen shot.