Firefox 57 / Quantum: emulate print styles
Asked Answered
M

2

17

How can I emulate the media type "print" in the new Firefox Quantum dev console?

Tried to enable it somehow and searched the documentation but couldn't find any hints!

Marqueritemarques answered 18/12, 2017 at 22:6 Comment(2)
Possible duplicate of Faster way to develop and test print stylesheets (avoid print preview every time)?Klayman
@Marqueritemarques Would you mind switching the accepted answer to my answer below? The currently accepted answer is not up to date anymore, and I have provided the new correct answer below.Anthracene
H
13

[UPD] this console has gone starting from v62. But after some time toggle button for switching into Print mode is available in DevTools again. Please check another answer below(unable to delete accepted answer)

I thought it's impossible. But suddenly have found answer in another topic:

  1. press Shift + F2 to get special browser console
  2. type "media emulate print"
  3. hit "Enter"

That's it.

Hydr answered 18/12, 2017 at 22:42 Comment(7)
thanks! on the mac it is shift + fn + F2 to get to this "special" console :)Marqueritemarques
This console has been removed since Firefox 62. There is no way how to emulate print media type now, AFAIK.Acculturate
WTF Mozilla? Why would you remove this?Adlar
@KyleO While I lament it as well, they had good reasons. It was not being maintained and allowances for the code to remain/continue working was blocking other necessary changes/features.Adkinson
The answer is not validBenedicite
@Nazar VynnytskyI once you untick "Accepted answer" mark, I'll be able to delete itHydr
The Firefox documentation for the Browser Console states that the Browser Console command line is disabled by default but lists a few ways it can be enabled.Jamijamie
A
53

Print style emulation can be toggled from the styles panel in the Inspector in the Developer Tools. It's in the toolbar at the top of the styles panel, the little page icon (toggled active in the screenshot):

Screenshot of the toolbar at the top of the styles panel showing a tiny page icon that is used to toggle print simulation


History

After the GCLI (Developer Toolbar) has been removed, the feature is now once again available in the latest nightly version of Firefox. As of May 2019, this has not yet landed in the current stable release (66), but it is available in the current Developer Edition and the Nightly Channel (68.0a1 and above).

Update August of 2019 (v68)

Version 68 has landed in the stable release channel, so the feature is now available in all Firefox distributions.

Anthracene answered 17/5, 2019 at 8:18 Comment(2)
Thanks for this small icon :)Benedicite
Oh God... I need at least 3 hours to find this... Come on Moz.. you wasting someone time for... argh...Giulia
H
13

[UPD] this console has gone starting from v62. But after some time toggle button for switching into Print mode is available in DevTools again. Please check another answer below(unable to delete accepted answer)

I thought it's impossible. But suddenly have found answer in another topic:

  1. press Shift + F2 to get special browser console
  2. type "media emulate print"
  3. hit "Enter"

That's it.

Hydr answered 18/12, 2017 at 22:42 Comment(7)
thanks! on the mac it is shift + fn + F2 to get to this "special" console :)Marqueritemarques
This console has been removed since Firefox 62. There is no way how to emulate print media type now, AFAIK.Acculturate
WTF Mozilla? Why would you remove this?Adlar
@KyleO While I lament it as well, they had good reasons. It was not being maintained and allowances for the code to remain/continue working was blocking other necessary changes/features.Adkinson
The answer is not validBenedicite
@Nazar VynnytskyI once you untick "Accepted answer" mark, I'll be able to delete itHydr
The Firefox documentation for the Browser Console states that the Browser Console command line is disabled by default but lists a few ways it can be enabled.Jamijamie

© 2022 - 2024 — McMap. All rights reserved.