loading...
Cover image for Emulate Print Layout with Chrome DevTools

Emulate Print Layout with Chrome DevTools

theroccob profile image Rocco Balsamo ・2 min read

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

Posted on by:

Discussion

markdown guide