Faster way to develop and test print stylesheets (avoid print preview every time)?

Asked 1/3, 2012 at 16:3 Answered 28/11, 2017 at 13:13

193

This is my process right now:

Save changes to print.css
Open browser and refresh page.
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?

Loyalist answered 1/3, 2012 at 16:3 Comment(4)

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. – Loyalist 1/3, 2012 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. – Marelda 27/10, 2014 at 16:9

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. addons.mozilla.org/en-US/firefox/addon/printprint-preview – Marelda 27/10, 2014 at 16:16

For Firefox, in 2023, you can see this answer. It's now a single button-click from the "Rules" panel of the inspector. – Leukas 7/11, 2023 at 18:27

229

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):

Open Chrome DevTools
Hit esc on your keyboard
Click ⋮ (vertical ellipsis)
Choose Rendering
Tick Emulate print media

See screenshot below:

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.

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.

Rozalie answered 8/8, 2013 at 6:57 Comment(4)

@SupaIrish Yes, for Firefox see Szymon's answer. – Chasseur 23/10, 2015 at 2: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? – Kessler 19/2, 2016 at 14:50

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. – Kessler 19/2, 2016 at 15:10

on osx selecting this option doesn't seem to do anything? – Tracey 9/3, 2018 at 13:3

165

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.

Balm answered 5/3, 2015 at 8:47 Comment(5)

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. – Mediate 12/5, 2017 at 2:14

Sadly, the GLCI was dropped from firefox with version 62. A drag. – Limacine 21/9, 2018 at 19:16

How to enable this without the GLCI (shift+F12)? – Stele 18/1, 2019 at 18:19

@Stele You can emulate print styles in Firefox another way now: #47877612 – Retirement 7/8, 2019 at 19:40

I've just tested what @Retirement said in Firefox v68 and it works. – Stele 8/8, 2019 at 14:55

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"

Jacobson answered 1/3, 2012 at 16:9 Comment(0)

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.

Adrian answered 1/3, 2012 at 16:34 Comment(2)

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. – Hartwig 5/11, 2016 at 8:5

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. – Onomasiology 20/4, 2019 at 17:39

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.

Blotchy answered 1/3, 2012 at 16:12 Comment(0)

simple for me (not having @screen parts or similar¹) 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

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

Grizelda answered 11/1, 2015 at 1:19 Comment(0)

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!

Selfrestraint answered 29/10, 2013 at 20:2 Comment(3)

This doesn't catch cases where page breaks hide/break content and other quirks that may appear in certain paper size(s) – Wrap 23/10, 2020 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. – Selfrestraint 24/10, 2020 at 18:8

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. – Wrap 25/10, 2020 at 1:11

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.

Supranational answered 14/12, 2014 at 22:40 Comment(0)

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

Thuythuya answered 1/3, 2012 at 16:16 Comment(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

Brey answered 28/11, 2017 at 13:13 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags