How to Preview Printed Websites with Chrome

Last year I had a project that required a website render in a special way when printed. This is not a frequent request, but it happens from time to time, even in 2017.

Because it was such an infrequent request I didn't have a great workflow for testing. My method had always been to use the browser's built in print-preview as I worked on the page.

However, I discovered a great tool in Chrome that lets you preview the print-mode version of whatever page you're looking at in the browser.

If you tap the vertically-stacked ellipsis in the Developer Tools you'll see an option under More Tools labeled Rendering. Selecting this will render another tab pane at the bottom of your window with various options. You'll want to select Emulate CSS Media and print from the dropdown selector.

You'll now be able to test, reload and inspect elements as normal but with the print-version of your webpage on display. Ultimately doing an actual print is probably the best test, but this is much faster than my old way of doing it.

I haven't figured out how to do this with Safari or Firefox. Chrome might be a bit of a battery hog, but I find it's development tools are much more intuitive and robust than other browsers.