Is it possible to view a page in Firefox using "print" media type?

Question

I'm not talking of the Print Preview - I mean to view the webpage in Firefox "normally", with access to e.g. the F12 Developer Tools, but I want the layout to be the same as if I was printing the page out.

score 55 · Answer 1 · edited Jun 11 '19 at 15:02

55

There is now (June 2019) a nice button in the devtools. See this discussion mentioned in the answer by @interDist above.

edited Jun 11 '19 at 15:02

Worthwelle

4,538
11
21
32

answered Jun 11 '19 at 09:01

Alexander Rutz

707
6
4

1

This solved my problem - the new button was hidden because my style pane was too narrow. Following your screenshot, I widened my pane and got a live print media preview. – Qsigma Jul 23 '19 at 13:50
2

Additional tips for context: this is actually inside `Inspector` tab and its subview `Rules` which is the part that shows the applied CSS rules for currently selected DOM node. The tootip for the button says "Toggle print media simulation for the page". At first I was looking for this in the top toolbar of Web Developer Tools. – Mikko Rantalainen Jul 02 '21 at 14:49
@gaazkam Could you please select this as an answer? – M at Jul 14 '21 at 10:18

score 13 · Answer 2 · answered Aug 14 '16 at 21:37

From https://developer.mozilla.org/pl/docs/Tools/GCLI : Launch the Developer Toolbar with Shift+F2, then type: media emulate print

Somehow it doesn't solve my problem though, this what I see after this command differs from the Print Preview and from what is printed out... :(

interDist · Answer 3 · 2018-09-19T04:26:09.297

10

As of September 2018, no, there is no such option. The Developer Toolbar, mentioned by @gaazkam, was removed in Firefox 62 in September 2018. There is no replacement for the media emulate command in DevTools, although it may be given some priority now that the command line interface is gone. Discussion is also here: https://discourse.mozilla.org/t/how-to-media-emulate-print-without-developer-toolbar-gcli/30975.

edited Sep 19 '18 at 04:26

answered Sep 18 '18 at 12:17

interDist

211
2
6

This appears to be a comment on the existing answer. – Blackwood Sep 18 '18 at 13:09
1

Actually, this is the correct answer for 2018. – zmbq Sep 21 '18 at 20:40
The way I do it, is open the site, go to print, then you can right click on elements and use "Inspect element". Chrome you can do the same. I know it's not what OP originally wanted, but just a work around for now. – user2924019 Oct 16 '18 at 16:14
doing it this way @user2924019 there are no css rules shown – Hayden Thring Nov 08 '18 at 04:55
@user2924019 in Chrome, the only thing I can inspect in this way is `` within a `preview-wrapper` div... – interDist Nov 08 '18 at 11:05
2

Reading in 2019? There's an icon top-right in DevTools, looks like a page with one corner folded over. See Alexander Rutz's answer. – William Turrell Nov 25 '19 at 15:05

score 6 · Answer 4 · answered Aug 05 '20 at 13:34

6

This can be done using the developer tools by pressing the 'Toggle print media simulation for the page' button in the styles panel.

Example of print tools

answered Aug 05 '20 at 13:34

Jon Koops

161
1
1

score 0 · Answer 5 · answered May 05 '23 at 13:07

0

This doesn't work for me at all. Using Bootstrap 4.6, almost NOTHING happens when I choose this, both in FF and Chrome. The only think that happens is that my elements with class print-none disappear.

answered May 05 '23 at 13:07

Chris

13
4

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 05 '23 at 13:22
Sorry. Could find no way to comment on someone else's answer... There seems to be no button or field under them. – Chris May 06 '23 at 17:49

Is it possible to view a page in Firefox using "print" media type?

5 Answers5