How do you debug printable CSS?
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.
In Firefox 69, I found a button to simulate print media. Just open the Developer Tools (F12) and click on Inspector. The toggle button is the leftmost icon that's in the highlighted section in the screenshot below, the one that looks like a sheet of paper.
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.
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