DEV Community

Cover image for Emulate Print Layout with Chrome DevTools
Rocco Balsamo
Rocco Balsamo

Posted on

1

Emulate Print Layout with Chrome DevTools

Ever want to make your website look good in print layout? A lot of sites do it well, but others fall flat and you're stuck with tons of nasty headers when you go to print.

I know, I know, you're probably laughing at the thought of printing something, but I actually "print" stuff all the time when I want to save an article to PDF.

dev.to does a pretty good job of removing headers and footers in print mode, so you can try this directly on this article.

Press ctrl + shift + i (or cmd + shift + i on Mac) to open up Chrome Developer Tools. Then select the shish kabob in the top right corner of the devtools window and select More Tools -> Rendering

alt text

Then scroll to the bottom and select "Emulate CSS Media" with "Print" in the pulldown.

alt text

That changes the view of the page from this:
alt text

To this:
alt text

Medium also does a good job at this. Check out this article: https://medium.com/@theroccob/devtools-2017-a-free-course-on-google-chrome-developer-tools-43af9c4f8d5d

Here it is without print emulation:
alt text

With print emulation:
alt text

Thanks for reading!

If you're interested in some free DevTools video tutorials, check out my free video course at fogcitylearning.com

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

If this post resonated with you, feel free to hit ❤ī¸ or leave a quick comment to share your thoughts!

Okay