How to "media emulate print" without Developer Toolbar (GCLI)?

I strongly want to support this feature request.

I’ve just learned about the Developer Toolbar about one month ago. Before then, whenever I had to test know how s.th. is rendered when printed I used to use Chrome. Which of course is not sufficient for this specific use case if you want to know how FF prints it. And always using the print preview is not the nicest option either :slight_smile:

As a temporary workaround, you could try this function in the Web Console:

I don’t have a lot of sites to test on so there probably are numerous cases it doesn’t handle. Feedback welcomed before I post it as a userscript for Violentmonkey / Greasemonkey / Tampermonkey, or feel free to take it and run with it.

I’d like to add myself to request this urging feature, too.

I often print software documentation to be able to learn offline. To do so I remove unnecessary or overlaying navigation/header/footer HTML nodes from a web page before printing. For this I need to examine what the page looks like when printed. Then I can remove or alter these nodes in Inspector while CSS media emulation is still turned on.

Please re-add. A combobox in Web Tools (with auto-complete) will do (plus a Clear button to reset).

Wanted to voice support for this feature. A colleague of mine is being forced to use Chrome because this functionality is crucial to their job.

1 Like

I’m not sure this feature will address all of that because it doesn’t paginate the media, so you can’t tell when fixed position elements are going to be a problem. Print Preview can help with that.

Actually, media emulate print worked for me. Fortunately, pagination has not been a problem for me ever since. I cannot remember pagination being a problem.

You know, with Print Preview I cannot edit the printed result before it can be printed:

Removing all the unnecessary page chrome is crucial for printing. It’s weird, documentation teams seem to add @media print rules (the web page looks different with media emulate print enabled), but apparently not for printing.

I regularly encourage documentation teams to add @media print rules targeted for easy printing. However, the word doesn’t spread easily. Currently, the only ones I know of to actually maintain meaningful @media print CSS styles are Microsoft and the AngularJS team.

1 Like

I’m also missing this feature. I like the addition of :screenshot, but I really need the media emulate print feature for Firefox and print preview really isn’t good enough for debugging print media.

I, too, do need it, for debugging.

I was completely shocked by the dropping of this most important developer tool. Not used a lot but when needed TOTALLY INVALUABLE.

Firefox is slowly disenfranchising its main and in my opinion most important user base. Developers, Its us that promote firefox as the must have browser. Without us mozilla firefox wont have a user base.

For the time being I am using Waterfox as it still allows the use of critical plugins and media emulate still works.

Once again bitterly disappointed with the direction Firefox is insisting on going down

Landed here looking for the same thing. I’m dealing with tens of thousands of pages of content across many documents that need lots of revisions and improvements that will be printed. Chrome provides emulation, but I had high hopes that Firefox had something even better, specifically developer insight into page breaking behavior. It’s a real pain to have to go to PDF preview, especially when our content has hundreds of pages per document.

I use this feature maybe twice a year, but when I need it, it’s crucial.

My voice also in support of this feature. I want to tweak how some pages are printed, and I prefer the CSS support of Firefox to that of other browsers. However, I cannot emulate the media print.

Firefox is no longer a browser to use in the office, at work. In our office more than 100 employees have gone to Google Chrome just because it has the function “Save as PDF as default” at print options.

Before v62 we installing doPDF as virtual printer and using Firefox, now we can not customize @media print because we do not have Emulate media print, so the only solution we have is Google Chrome.

Firefox has become a browser just for kids and newbies, in business and at work has dramatically lost ground!

I reverted to FF 60 ESR now.

It still has the media emulate feature and won’t bug me every other day with new update installations.

Hi guys, any news on this?
This feature is really VERY important - signing the petition now :slight_smile:

Thanks all for the input. We’re working on this now :slight_smile:

Good news! This has now been released to Firefox Nightly (which you can get here).

Which version is needed for this? Just installed “Version 68.0a1 (2019-04-08) (64-bit)” using firefox-trunk from the ubuntu-mozilla-daily ppa and I’m not seeing that icon.

Edit: Works in 68.0a1 (2019-04-10) (64-bit), thanks!

Though Firefox version v70+ has the option to “Toggle print media simulation for the page” (as seen in the GIF by @pbro), there seems to be no way to do the opposite—disable print stylesheets while printing.

This used to be possible in Firefox with media emulate screen, and is supported in Chrome by selecting screen instead of print in Chrome Devtools (https://developers.google.com/web/tools/chrome-devtools/css/print-preview). It’s immensely useful when printing those web pages which only have screen-specific stylesheets, and thus appear broken when printed.

Is this feature in the works? :slight_smile:

No this is not currently in the works. We have the capability to do it, but I don’t know where such a feature would fit… The command line was a good place for it, but that’s gone.
I wish we had a command menu like Chrome, that would make it easy to put all of these actions that otherwise don’t belong in the UI.