How to check and debug media print in Chrome

How to check and debug media print in Chrome

If you want to check the media print at the time of printing in Chrome, it is wasteful of paper if you print every time.

I am eco-friendly anyway, so I checked if I can check media print at the time of printing, it seems to be possible if Chrome, FireFox. However, I am not a FireFox person, so I will show you how to check (debug) with Chrome.

First, open the developer tools with F12.

Click on the three-point reader in the upper right corner and select “More tools” – “Rendering”.

Chromeでmedia printを確認・デバッグする方法

The Rendering tab will open, scroll to the bottom.

Scroll to the bottom and select “print” under “Emulate CSS media”.

Chromeでmedia printを確認・デバッグする方法

This will put the browser in the same state as when it is printed out. Closing the developer tools will deactivate Emulate.

Currently, I could not find such a feature in IE.

高橋