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.
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.
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!
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
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!
@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
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:
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
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
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.
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.
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.
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.