Page 1 of 1
Forum

Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!

Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.

Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is no translation for that post!




Share:
Notifications
Clear all

How to preview CSS Printed in Google Chrome


 Hans
(@hans)
Noble Member Admin
Joined: 8 years ago
Posts: 2005
Topic starter  

While trying to optimize Tweaking4All for printing, I noticed how difficult it can be to see the print preview and tinker with the CSS code.
Well, until I found this trick ...

In Google Chrome, go to developer mode (F12).

Press +Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.

When visible, start typing "render" until you see the option "Drawer Show Rendering" - click this option.

Now more info becomes available, where you'll need to scroll down until you see "Emulate CSS media type". Here you can select "Print".

Google Chrome will instantly show your webpage as if it would prepare it for printing.

Note: This may work in other Chromium browsers as well (eg. Microsoft Edge, Apple Safari, Opera).


ReplyQuote

Like what you see and you'd like to help out? 

The best way to help is of course by assisting others with their questions here in the forum, but you can also help us out in other ways:

- Do your shopping at Amazon, it will not cost you anything extra but may generate a small commission for us,
- send a cup of coffee through PayPal ($5, $10, $20, or custom amount),
- become a Patreon,
- donate BitCoin (BTC), or BitCoinCash (BCH).

Share: