47

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.

Improve this question

4 Answers 4

Reset to default
64

Devtools Screenshot with a nice and friendly ponting arrow

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

Improve this answer
3
  • 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
    Commented Jul 23, 2019 at 13:50
  • 4
    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
    Commented Jul 2, 2021 at 14:49
  • @gaazkam Could you please select this as an answer?
    – Mahdi Rafatjah
    Commented Jul 14, 2021 at 10:18
13

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... :(

Improve this answer
11

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.

Improve this answer
6
  • This appears to be a comment on the existing answer.
    – Blackwood
    Commented Sep 18, 2018 at 13:09
  • 1
    Actually, this is the correct answer for 2018.
    – zmbq
    Commented Sep 21, 2018 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.
    – HippoDuck
    Commented Oct 16, 2018 at 16:14
  • doing it this way @user2924019 there are no css rules shown
    – Hayden Thring
    Commented Nov 8, 2018 at 4:55
  • 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
    Commented Nov 25, 2019 at 15:05
9

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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .