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

jscher2000 · August 16, 2018, 12:43am

The media emulate command line options are gone in Firefox 62+.

What’s the new way or plan for a new way? There might be a Browser Console hack, but I have not found it.

sole · August 20, 2018, 9:36am

Hello

Sorry that the command (and the GCLI) are gone.

We are slowly bringing back the features that were used in the GCLI, but unfortunately this particular one is not migrated yet, as it wasn’t one of the most popular ones. We’re focusing on screenshots, color pickers, etc, still.

We have a bug to track exposing that functionality to the user perhaps on the Responsive design mode view, or with some sort of UI, rather than a console command, but we’d be interested in hearing from users of the feature on what their ideal UI would be. If you’re happy with the console way, that’s valuable to know; perhaps you wished in the past it were elsewhere. I want to hear those thoughts, if you’d be kind to share them with us

Thank you and apologies again!

jscher2000 · August 20, 2018, 2:33pm

I personally could use a toggle button that switches between screen and print.

A Chrome-style select control also would work if multiple media types need to be supported: https://twitter.com/ChromeDevTools/status/966738610157338624

gabe · September 4, 2018, 6:38pm

I’m just chiming in to say that I would absolutely love for this to be a feature available in the responsive design mode.

That mode is already invaluable for working with variable interface sizes, letting me toggle between different media types would make it that much better!

sole · September 7, 2018, 10:37am

@gabe: Thank you for the chime! It’s helpful! We talked about this feedback internally and we will aim to increase priority on these features on RDM

jscher2000 · September 8, 2018, 2:04am

Would it be quicker to add as a Helper command in the Web Console since that wouldn’t require adding UI? I see :screenshot has landed there in Firefox 62:

pursuitofloot · September 21, 2018, 8:53am

Just adding another voice to the chorus of people who want this feature to return. I have a firefox-only print error that I need to debug and without that tool I am stumped

rittmeyer · September 21, 2018, 6:05pm

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

jscher2000 · September 21, 2018, 7:29pm

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

gist.github.com

https://gist.github.com/jscher2000/f29d5d12713fa9afb40029bdb55e9c99

showAsPrint.js

// For Firefox's Web Console, creates the functions showAsPrint() and undoShowAsPrint()
// to roughly emulate print media and revert
function p2s(media){
	if (media.indexOf('all') > -1) return media; //no need to change
	if (media == 'print') return 'all, wasprint'; //show on screen, too
	if (media.indexOf('print') > -1 && media.indexOf('screen') > -1) return media; //no need to change
	if (media == 'screen') return 'wasscreen'; //hide these rules
	if (media.indexOf('screen') > -1) return media.replace('screen', 'wasscreen'); //hide these rules
	return media + ', WTF'; //for debugging only
}

This file has been truncated. show original

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.

Alman · September 23, 2018, 8:53pm

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).

amyc · September 26, 2018, 4:23am

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.

jscher2000 · September 26, 2018, 11:29pm

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.

Alman · September 27, 2018, 12:31pm

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.

howiecha · October 17, 2018, 3:23pm

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.

doganmeh · November 26, 2018, 10:24pm

I, too, do need it, for debugging.

iamdeveloperchris · November 26, 2018, 11:23pm

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

michael.prescott · December 6, 2018, 7:47pm

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.

Glorbington · December 6, 2018, 9:06pm

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

samuelm · December 13, 2018, 7:50pm

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.

mariusfv · December 15, 2018, 9:02pm

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!