Debugging print stylesheets has always been a bit of a pain. The traditional way of doing so was to manually change the media attribute of all link tags from print to screen or all while testing.

<!-- Before -->
<link rel="stylesheet" href="print.css" media="print" />

<!-- After -->
<link rel="stylesheet" href="print.css" media="screen" />

The popular Web Developer Add-on for Firefox even has an option to do this for you automatically.

Then something changed.

We found out that unnecessary HTTP requests are bad. We also found out that there are some serious performance issues with print stylesheets.

Therefore, following the lead of projects like the HTML5 Boilerplate we all switched to writing our print styles inline with the rest of our CSS.

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

Inline print styles save HTTP requests and are easier to maintain, but they unfortunately make testing a bit harder. They don’t work with Firefox’s Web Developer Add-on and a simple find and replace is now quite a bit harder.

Good News!

A means to emulate the print media type has just landed in Chrome Canary.

To use it, first open up the settings by clicking on the gear in the bottom right corner of the DevTools:

Next, select the Overrides menu, check the “Emulate CSS media” checkbox, and select “print”.

That’s it! This will apply both rules defined in external media="print" stylesheets as well as rules within inline @media print {} blocks. For bonus points, combine this with an application like LiveReload that can apply CSS changes without refreshing the page and you have a robust means of developing and debugging print stylesheets.

This feature was added in version 25 of Chrome Canary so it hopefully will make it into Chrome stable around Chrome 27. If you don’t have Canary yet you should consider installing it side by side with the stable release.

WON’T SOMEONE THINK ABOUT THE TREES

Of course, the definitive way of testing print stylesheets is to physically print a web page on actual pieces of paper. I’ve done this plenty of times. And if you’ve read this far you likely have to. Hopefully the next time you have to debug printing you can save a bit of paper.

Photo Credit