How to See the Print Media CSS in Firebug

How to see the print media CSS in Firebug?

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.

How to see the print media CSS in Firebug?

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.

How do you debug printable CSS?

In Chrome 51:

Open devtools (CTRL + F12 or CTRL + SHIFT + I) and click on the ... menu, click More Tools > Rendering settings to open the Rendering tab of the developer console (alternatively, if the console is open just navigate to this tab).

In that tab, select and check the box for Emulate Media: print.

How to test print output of browsers with online tools?

The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.

CSS print issue, title aligns right

add this inside your @media print

h1.author { 
          text-align:center; 
          margin:auto; 
          margin-top:5px; 
}

Your css default media appears as screen when i check it with firebug and chrome developer tools, so i think when its processed to be printed the h1.author definition is omited.

the resulting @media print you should have is:

/* print media */
 @media print {
.noprint {
    display:none;
}
    h1.author {
        text-align:center;
        margin:auto;
        margin-top:5px;
    }
}

---

Related Topics