How to see the print media CSS in Firebug?

css printing firebug print-css

51,119

Solution 1

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.

Solution 2

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

Solution 3

Newer Firefox

Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.

Old firefox

Firefox does not need firebug now.

Run developer toolbar by pressing Shift+F2
Type media emulate print

Type media reset in order to return to standard view.

Solution 4

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

Solution 5

Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the @media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.

With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.

For example, you can switch an original

<link rel="stylesheet" type="text/css" media="print">

<link rel="stylesheet" type="text/css" media="screen">

and the browser will apply it. You'll also have to deactivate the screen-only ones.

Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.

Edit 1 This trick suggests me using javascript to automate this...

(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.

As pointed out above, this solution does not work with html code like this, because the styling inside the @media print won't be applied by the browser:

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

View more solutions

51,119

Author by

Janko Mivšek

Long time Smalltalker, author of Aida/Web Smalltalk web framework.

Updated on July 05, 2022

Comments

Janko Mivšek almost 2 years

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?
AmbroseChapel about 15 years

"every time you refresh the page it reverts to the screen stylesheet" Options > Persist Features
Janko Mivšek about 15 years

Ambrose, thanks for that hint. I never thought that Options > Persist Features could mean that!
David Silva Smith about 13 years

After installing web developer (addons.mozilla.org/en-US/firefox/addon/web-developer) the print view looked much different than an actual print.
jezmck about 12 years

It appears to use ONLY the print styles. :(
clintm about 12 years

@jezmck to my defense, that was in '09. :)
Jeroen over 11 years

It appears to use ONLY print styles. A nice trick is to not only set your specific media types, but also set all other stylesheets to media="all, print". Works for me :-)
Andy over 11 years

For me it appears to use also screen styles and just apply the print one on top
Matthew Flaschen about 11 years

I can confirm @Andy's report. It's a bug, since you only want the print ones to show.
Abbas almost 7 years

Just knew it, there are many automation Firefox has been added recently.
artfulrobot over 6 years

This is now dead, but see core Firefox answer stackoverflow.com/a/40377948/623519
Kevinoid over 2 years

Unfortunately, this answer does not apply to Firefox 62 and later since Developer Toolbar/GCLI was removed. See Bug 1461970 and Bug 1429421.