How do you debug printable CSS?

I use Firebug and IE Developer Toolbar all the time to debug tricky CSS problems. But occasionally, a tricky bug comes up that only appears when you go to print the page.

What techniques/tools do you use to diagnose problems like this? Is there a way to get more use out of traditional CSS debugging tools in print view?

Updated: I already use a PDF printer to avoid wasting paper; my problem is that I can't right-click on the printed DOM. Some of the other answers below are quite helpful, thanks. :-)

Solution 1:

Just found a comment by lee-penkman about a new feature in Firefox here: Press Shift-F2 in Firefox to open the browser console (not the javascript console), then enter media emulate print. Works absolutely great!

Update Sept. 2018: Starting with Firefox 62, the developer console has disappeared. There doesn't seem to be a way to activate print style emulation now.

Update Nov. 2019: It seems that in Firefox 69, there is again a new button for print style emulation. See the other answer on this page: https://stackoverflow.com/a/58015662/195476

Solution 2:

In Chrome 51:

Open devtools (CTRL + F12 or CTRL + SHIFT + I) and click on the ... menu, click More Tools > Rendering settings to open the Rendering tab of the developer console (alternatively, if the console is open just navigate to this tab).

In that tab, select and check the box for Emulate Media: print.

Solution 3:

I use the WebDeveloper plugin and the CSS --> Display CSS by Media Type --> Print to view the CSS as it would when printed. Firebug's inspection utilities work with the CSS as filtered by the plugin.