How do you debug printable CSS?

Question

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. :-)

Answer 1

I use the Adobe PDF virtual printer, because it's the closest thing to a real printer you'd get, without wasting ink and paper.

Anyway, it's recommended to have a separate CSS for prints, with much simpler graphics and less of the images you use just for design purposes.

Answer 2

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.

Answer 3

Print to Microsoft XPS Document Writer if you don't want to pay money. Or use SnagIt if you've got the funds (free trial on site).

Answer 4

I use Firefox and the developer toolbar.

I use the real time css edit tool in the task bar, it's pretty usefull to modify your css on the fly on see the results in real time.

I also use the outline feature, which the div and stuff like that on mouse over, on your website. Really helpful to find div.

For the print problem, go to CSS -> Display CSS style by media -> print

There are a lot of other tool available in this one, I probably use about 10% of it.

Try maybe you find something usefull.