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


(jscher2000) #1

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) #2

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 :slight_smile:

Thank you and apologies again!


(jscher2000) #3

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


(Gabriel Benson) #4

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) #5

@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 :slight_smile:


(jscher2000) #6

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

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 :confused:


(Wolfram Rittmeyer) #8

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:


(jscher2000) #9

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.


#10

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


#11

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) #12

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.


#13

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.


#14

Here’s another voice for re-adding media print emulation. Any way is fine, though a toggle button would be nicer than via a console command.

As it stands now I’ve had to install Firefox ESR seperately to get this functionality back.


#15

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.