--- title: How to Preview Printed Websites with Chrome author: George Mandis date: 2017-02-18 tags: post --- Last year I had a [project](http://seafoodsustainability.org/) 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. ![Using Emulate CSS Media in Chrome](https://s3-us-west-2.amazonaws.com/george.mand.is/images/chrome-print-preview.png) 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.