Emulate Print Layout with Chrome DevTools
Rocco Balsamo Apr 17 '17
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.
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.
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
Thanks for reading!
If you're interested in some free DevTools video tutorials, check out my free video course at fogcitylearning.com