How to see the print media CSS in Firebug?

Question

Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?

Answer 1

You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.

Answer 2

Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.

Answer 3

What about Web Developer Toolbar? https://addons.mozilla.org/en-US/firefox/addon/60 , when installed go to CSS -> Display CSS by media type -> Print

Answer 4

Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.

What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.

Answer 5

In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.

Answer 6

I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.

Answer 7

Actually, be aware that you might see @media print CSS when you don't expect it.

Like SO uses:

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

...and hence one might expect the CSS panel in Firebug to somehow show:

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

But instead it shows the CSS as if the @media print is actually active, like:

#sidebar, #nav, [..], div.vote {
  display: none;
}

(See also the related issue report: CSS Panel does not have @media UI.)