Emulate Print Layout with Chrome DevTools

Rocco Balsamo — Mon, 17 Apr 2017 00:06:57 +0000

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

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

That changes the view of the page from this:

To this:

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:

With print emulation:

Thanks for reading!

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

DEV Community: Rocco Balsamo

Emulate Print Layout with Chrome DevTools