How do I use Firebug with print-preview in Firefox?

css firefox firebug print-preview
joeforker picture joeforker · Nov 3, 2010 · Viewed 10.6k times · Source

Possible Duplicate:
How to see the print media CSS in Firebug?

I'm working on a Plone website with plenty of @import and linked CSS and am trying to use the Web Developer Toolbar to show only the print css.

Unfortunately on this particular website the web developer toolbar's print css has way fewer styles than regular 'print preview', won't reset without opening the page again in a new tab, and seems generally broken. Wikipedia for example responds better to the same 'view only print css' option.

How can I use Firebug with a print-preview-esque presentation? Could I be expressing the printability of different CSS declarations in a more web developer toolbar compatible way?

Answer

Nicolai picture Nicolai · Sep 13, 2011

Found this, witch might help you out: http://neutroncreations.com/blog/easy-print-css-coding-using-firebug-and-web-developer-toolbar/

... By using Firefox with its two close friends; Firebug and Web Developer Toolbar (you’re all using these daily for front-end engineering anyway, right?), we can make working on a print stylesheet as simple as one for the screen. Observe.

First, open your website in Firefox, then we’ll ask Web Developer Toolbar to render the page using your print rather than screen CSS by choosing CSS → Display CSS By Media Type → Print from the Web Developer Toolbar...

Related questions

How can I inspect and tweak :before and :after pseudo-elements in-browser?

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent. Despite this feature being mentioned in this WebKit/Safari …

Read More
Can you make hovered state in Firebug "sticky?"

When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug? Example; I hover over a …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More