Chrome Device Mode Screenshot White Screen Issue

Testing websites or creating mobile webpage screenshots can be done using actual mobile devices, but in certain scenarios, this approach can be inefficient and costly. Chrome browser’s built-in device mode can perfectly simulate various mobile device resolutions, and Chrome also provides screenshot functionality.

Problem

Since Chrome’s provided devices are limited, sometimes we need to add custom devices. However, recently when using custom devices for screenshots, I found that the screenshots came out as blank pages.

The effect is shown below:

After checking the custom device parameters and doing comparison tests, I finally found the cause. It turns out that when adding a custom device, the Device pixel ratio parameter cannot be empty, otherwise screenshots will appear as white screens or blank pages. As shown below, I manually set it to 1:

Close the tab, reopen the webpage, press F12, click device mode, still using the custom device just created, click screenshot, and found it’s OK now.

Explanation

Device pixel ratio

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a device. On a retina screen iPhone, the screen has 640 physical pixels but still 320 independent pixels, therefore, devicePixelRatio equals 2.

Important Details

After modifying custom device parameters, such as width and height, refreshing the current tab won’t take effect. You must switch the simulated device or close the tab and reopen it.