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.

Answer 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

Answer 2

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.

Answer 3

I always used web developer toolbar (as described in the other answers), but Firebug seems to miss some styles from time to time. So I added a Bookmark to my browser and added the following Javascript as URL of the bookmark. Now I can simply switch to print style by clicking the bookmark:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

The code above finds all stylesheet links, tests if it is media=print and if so it changes it to media=all (and hides all media=screen by replacing it with media=dontshow) and reloads the stylesheets by adding a time token to the URL. The basic reload script is from someone else, I added media part. This works great for me!

This would be the more readable version of the JavaScript URL above for explanation:

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

Answer 4

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