192

This is my process right now:

  1. Save changes to print.css
  2. Open browser and refresh page.
  3. Right-click and choose Print > Print Preview (Firefox, but any browser really)

It's step 3 that bugs me and I'm wondering if it's possible to cut it out of the process with a plugin or something. Just choose to view a page as print media, and then simply refresh to see the changes.

How do you test your print stylesheets? Do you always click print preview after a refresh?

Michael
  • 2,546
  • 2
  • 20
  • 26
  • Thanks for the suggestions, everyone. I would love it if Mozilla would add a developer setting to enable "Refresh" capabilities on the print preview window (not default to avoid end-user confusion of course). That's my ideal solution, because (agreeing with Faust) I usually need to see it in Print Preview to show _exactly_ how it will display (-background images, page breaks, margins, etc). Chrome might help a bit since it shows a preview by default. I'll also look at that Firefox PrintPreview add-on recommended by slolife. – Michael Mar 01 '12 at 19:22
  • This won't work for Mac as there is no Print Preview option, however, you may have a PDF option in your print dialog where you can open a preview "printed" to a temp PDF file. Not sure if this feature is built into OSX or because I have Acrobat installed. – Neil Monroe Oct 27 '14 at 16:09
  • Just making a clarification, it appears that in OSX, the Print Preview option is not available in the File... menu, but with the extension Print/Print Preview, you can have a button that launches it. https://addons.mozilla.org/en-US/firefox/addon/printprint-preview/ – Neil Monroe Oct 27 '14 at 16:16

10 Answers10

226

You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.

UPDATE 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

To view a page in print mode:
1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))
2. Start typing Rendering and select Show Rendering.
3. For the Emulate CSS Media dropdown, select print.

UPDATE 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

UPDATE 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

  1. Open Chrome DevTools
  2. Hit esc on your keyboard
  3. Click ⋮ (vertical ellipsis)
  4. Choose Rendering
  5. Tick Emulate print media

See screenshot below:

rendering settings 12/04/2016

UPDATE 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.

rendering settings 28/06/2016

UPDATE 24/05/2016

The naming of settings have changed once again:

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.

emulate CSS media

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
Patrik Affentranger
  • 13,245
  • 2
  • 22
  • 25
  • 2
    @SupaIrish Yes, for Firefox see Szymon's answer. – djule5 Oct 23 '15 at 02:15
  • The documentation is completely out dated and there is no emulate css media anywhere inside of the "more overrides" area. Where did it go? – TetraDev Feb 19 '16 at 14:50
  • 2
    Its located under "console (esc)" then "3 vertical dots" then "rendering" then "emulate print media" at the bottom - why so hidden I have no idea. – TetraDev Feb 19 '16 at 15:10
  • on osx selecting this option doesn't seem to do anything? – v3nt Mar 09 '18 at 13:03
166

In Firefox you can type Shift+F2 to open a Developer Toolbar command line, and then type media emulate print

You can also emulate other media types this way.

Szymon Świtała
  • 1,797
  • 1
  • 10
  • 3
  • 3
    I've noticed, that this *might* not reflect the same view as provided in print preview - espacially when it comes to extra whitespace - make sure, your print preview in not different after you're done with this substep. – jave.web May 12 '17 at 02:14
  • 16
    Sadly, the GLCI was dropped from firefox with version 62. A drag. – zerpsed Sep 21 '18 at 19:16
  • 4
    How to enable this without the GLCI (shift+F12)? – StR Jan 18 '19 at 18:19
  • 3
    @StR You can emulate print styles in Firefox another way now: https://stackoverflow.com/questions/47877112/firefox-57-quantum-emulate-print-styles/56182372#56182372 – TylerH Aug 07 '19 at 19:40
  • 2
    I've just tested what @TylerH said in Firefox v68 and it works. – StR Aug 08 '19 at 14:55
21

Firefox + Web Developer toolbar extension has a way to enable/disable various stylesheets.

Look under the CSS menu. There is a menu to disable and enable individual stylesheets and a "Display by media type" menu as well.

Also, to just reduce the steps to get to PrintPreview in Firefox, try the PrintPreview extension, that will create a toolbar button.

For Chrome, there is a port of that extension. From what I can tell with the Chrome version, you can choose "Show print styles"

slolife
  • 19,520
  • 20
  • 78
  • 121
13

I wouldn't use any testing method that doesn't involve print preview. There are too many differences: background images not working at all in print, but showing up in normal screen contexts being chief among them.

In Chrome, control+p goes immediately to print preview. (Just forget mousing up to your menu bar). That's pretty easy.

Faust
  • 15,130
  • 9
  • 54
  • 111
  • Chrome definitely does not stick to what is shown in the print media emulation. I've found that if you don't have chrome media query preprint function running in under 2ms, it will not paint the change. – cchamberlain Nov 05 '16 at 08:05
  • 1
    The problem with print preview is it doesn't allow element inspection, so debugging things such as padding and margins is extremely difficult. Seeing those elements separately is the best thing you can have when trying to debug box issues. – Seiyria Apr 20 '19 at 17:39
6

You could simply disable your screen styles and change your media type to "screen" for your print stylesheet while testing. This will not be exactly the same as using a real print preview (page breaks, document width, etc.), but it still gives you a pretty good idea.

Leo
  • 5,069
  • 2
  • 20
  • 27
5

simple for me (not having @screen parts or similar1) with FF:

  • put the @media print { ... part at the end of your CSS content
  • out-comment only the wrapper declaration /*@media print {*/ ... /*}*/
    • thus applying the print stuff to your styles immediately overriding them where applicable
  • (I am using LiveReload thus my browser page refreshes immediately after saving changes)
  • (otherwise, if not using LiveReload:) press CTRL+R to reload the page
  • now you already can do a lot of typical print CSS adjustments (font style, font size, spacings, colors) where one does not need the print preview yet
  • press ALT+F+V to open print preview and ALT+W to close it again

1: if one has them, out-/in-commenting those, depending on your tested media, may not be a big deal otherwise

Andreas Covidiot
  • 4,286
  • 5
  • 51
  • 96
3

As described in this other post (Using Chrome's Element Inspector in Print Preview Mode?), you can use chrome to simply emulate the print stylesheet. This is great as you can use the inspector to see where the styles are coming from rather than guess when you see the print dialog come up.

Access the Overrides Settings dialog by clicking the gear icon in the bottom right hand corner of Chrome's Element Inspector. Then select print as the target media type.

Awesome!

Community
  • 1
  • 1
Charity
  • 107
  • 1
  • 5
  • 1
    This doesn't catch cases where page breaks hide/break content and other quirks that may appear in certain paper size(s) – Enrico Oct 23 '20 at 17:12
  • Enrico, it's true that it doesn't specify page breaks, but you can easily use Chrome's print preview to see what it look like on the page size you plan to print with. – Charity Oct 24 '20 at 18:08
  • Of course, but you won't be able to debug them with the inspector, and it doesn't behave exactly like the final print. I've been dealing with issues related to `page-break-inside` over the past week which we can't reproduce emulating print, but are visible in the preview and it's difficult to pinpoint the issue just from the preview. – Enrico Oct 25 '20 at 01:11
2

At least in Chrome: During development, add to the body tag onload="window.print()". This will cause the print mode to open immediately after you refresh.

Unfortunately it doesn't seem like the developer tools are much use since it's essentially an embedded PDF.

Incidentally there are ways to eliminate step 2. One popular one is LiveReload.

nafg
  • 2,424
  • 27
  • 25
0

In Chrome 62, cmd-R/cmd-P works well on a Mac to bring up a nice preview of a @media print styled page.

This is accessible through the vertical elipsis in the upper right of the browser window itself (not Developer Tools) / Print...

Use esc to cancel the preview window.

So, for my workflow with IntelliJ IDEA and Chrome, it's: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab and I'm back in the IDE.

Chrome 62 in Windows 10 has the same Print... menu in the same place, accessible with ctrl-p: print in Chrome 62

Mojo Techno
  • 96
  • 1
  • 4
0

You could try temporarily removing your regular stylesheet, and only loading in the print one with a normal link tag.

Andrew
  • 1,963
  • 3
  • 25
  • 35