How do you debug printable CSS?

Dan_Fabulich_54829 0
Viewed 43725

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

css
10 Answers

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.

user_129500

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.

enter image description here

user_1619790

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.

user_832530

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.

evilpenguin_819460

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

Mike_Robinson_436870
Related