There are countless tools to help you with debugging CSS intended for the front-end “screen.” Inspector tools are now bundled with most modern browsers and are very powerful in terms of letting the developer manipulate the DOM in realtime.
However as soon as you try to develop UI for the printer it starts to get lame. Previewing the printer friendly version requires sometimes lots of steps and that could be quite exhausting on the long run. You could use addons that attempt to make this easier, but it still gets exhausting.
A good workaround I came across is using Javascript to dynamically remove the screen CSS and enable the print CSS instead. The underlying idea is quite simple: (jQuery)
$('link[media="screen"]').remove()
$('link[media="print"]').attr('media', 'screen')
You could run this code on load ($(function(){ /* here */ });), or trigger it on a certain event (clicking a certain test button for example.)
