Suggestions for debugging print stylesheets?

Question

I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:

change code
command-tab
reload

but that whole process gets much more arduous when you're trying to print:

change code
command-tab
reload
print
squint at print-preview image
open PDF in Preview for further inspection

Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?

How about the "Print preview" function of a browser which supports it (e.g. Firefox)? I've (mostly accurately) debugged some web pages for print with it. — Halil Özgür, Feb 28 '11 at 14:42
possible duplicate of [How do you debug printable CSS?](http://stackoverflow.com/questions/726825/how-do-you-debug-printable-css) — outis, May 22 '12 at 00:26
In Firefox, open the "Developer Toolbar" with Shift+F2, type "media emulate print" (or "emu" + Tab + "print"), Enter. — Marcello Nuccio, Apr 15 '16 at 13:50
related: https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ , https://stackoverflow.com/questions/726825/how-do-you-debug-printable-css — , Dec 05 '17 at 03:19
@MarcelloNuccio This should be an answer. https://stackoverflow.com/a/28873496/1696030 got quite some positive votes for comparison. “Developer Toolbar” is a little bit misleading as it's a command line interface. — Volker E., Dec 16 '17 at 23:03
well @MarcelloNuccio's answer was useful for me because I was looking for an answer in Firefox (!) but the original question was for Webkit/Chrome so it doesn't qualify here... — anarcat, Oct 11 '18 at 18:40

score 329 · Answer 1 · edited Nov 14 '16 at 19:46

329

There is an option for that in Chrome's inspector.

Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.
Then, select Media in the emulation drawer, and check the CSS media checkbox.

This should do the trick.

Update: The menus have changed in DevTools. It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

Source: Google DevTools page*

edited Nov 14 '16 at 19:46

Chris Bier

12,978
15
60
100

answered Jan 18 '13 at 13:55

Rafael Nogueira

3,470
1
11
13

5

Thanks, that's what I was looking for, couldn't find it :/ The shortcut doesn't work anymore though. I just do F12 + gear icon in the bottom right corner, then the setting is under the Overrides tab, – Aurelien Feb 28 '13 at 12:24
Merci Aurelien for pointing out the wring shortcuts. Just corrected – Rafael Nogueira Mar 06 '13 at 13:52
Thanks! The emulate css is very handy. – Blazes Apr 16 '13 at 11:01
19

unfortunately it is not 100% accurate :( – maazza Sep 18 '13 at 11:45
2

I wish I could up this post twice. It might not be 100% accurate, but it's accurate enough to solve a lot of strange and annoying problems. – wasatz Nov 15 '13 at 14:35
9

In Chrome `32.0.1700.14 beta-m Aura`, "Emulate CSS media [print]" is missing :( – Rocket Hazmat Nov 15 '13 at 14:48
1

Are you sure you don't need to select "Screen" instead of "Device"? – Jonathan Arkell Feb 11 '14 at 18:32
This is very neat. Is there anyway to get it to show where the page breaks are? – Rikki Apr 02 '14 at 22:57
@Rikki: The inspector would need to know which page size you are printing to, how big the printing zone is, the margins, etc. – Rafael Nogueira Apr 10 '14 at 15:30
@rflnogueira: so? :-) When you "Emulate screen", it lets you set the resolution, so it's feasible it could let you set the paper size for emulating printing. Or it could use the current print settings; an inspector for the print preview would be invaluable! – Rikki Apr 11 '14 at 17:12
@Rikki: You could try suggesting that to the Chrome team: http://www.chromium.org/getting-involved/bug-triage – Rafael Nogueira Jun 19 '14 at 13:12
This doesn't show up for me in Chrome unless I edit the options menu "override" to display this tab. On latest Chrome, but on a Mac, so might be related – GlyphGryph Sep 18 '14 at 19:25
37.0.2062.124 it is under Emulation -> Media – joetinger Sep 29 '14 at 20:21
As of Chrome 38, emulation is turned on with 'device mode' in the Developer Tools (cell phone icon). You alter emulation settings in the 'drawer' inside Developer Tools (command-prompt icon, looks like ⟩≡). – duozmo Jan 31 '15 at 00:36
Keep in mind that this works only for print, not for example for (print and orientation). Just to note that – Hrvoje Golcic Jan 08 '16 at 10:33
11

This answer needs to be corrected. As of Chrome 48, the print stylesheet emulator is no longer under "Emulation" but under "Rendering." – chharvey Feb 10 '16 at 17:39
2

Steps 2 and 3 are just wrong for the current Chrome (and the Chrome as of your most recent edit). This has **absolutely nothing** to do with device mode. Just open dev tools, open the panel (Esc or choose "show console" from the menu), and tick "Emulate print media". That's it. – T.J. Crowder Apr 05 '16 at 06:51
2

This is now hidden away under the three-dots menu in the console section of dev tools. – Mr_Chimp May 23 '16 at 14:45
13

Three-dots menu (right side) in the inspector > More Tools > Rendering Settings > Emulate media > print – allicarn Jul 07 '16 at 22:22
@allicarn +1 I added this to the answer above so it's easier for folks to find. – Chris Bier Nov 14 '16 at 19:46
It's important to note that this won't remove background colors and images, which actual printing will do. – Gavin S. Yancey Apr 21 '17 at 08:22

Dawson · Answer 2 · 2011-03-02T07:14:12.593

I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use @media screen to debug - @media print for final css

Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the @media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to @media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the @media screen rules to the referenced file.

Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.

W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/

Just wanted to comment that this method is pretty clever. Much easier to resize the window slightly to "toggle" print styles than to use a print preview function. While you still have to do that sometimes for IE compatibility and such, this is great for initial iteration of print styles. — chucknelson, Jun 17 '11 at 16:24
@Chuck. Thanks Man. Hey, I realized my demo was off-line, so I created a fiddle for it. http://jsfiddle.net/dNEmT/ — Dawson, Jun 18 '11 at 05:15

minlare · Answer 3 · 2017-05-31T12:48:10.253

20

Chrome 48 you can debug print styles within the Rendering tab.

Click the menu icon top right of inspector and Rendering Settings.

Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering

edited May 31 '17 at 12:48

answered Feb 03 '16 at 17:04

minlare

1,915
18
41

4

Chrome 49 : *F12* (developer console) -> *ESC* (console) -> Rendering -> Emulate print media – user1477388 Mar 18 '16 at 18:07

johntrepreneur · Answer 4 · 2015-04-08T22:58:22.337

19

In Chrome v41, it's there, but in a slightly different spot.

enter image description here

edited Apr 08 '15 at 22:58

answered Mar 20 '15 at 21:07

johntrepreneur

3,956
4
33
49

3

In v53 it's on the Rendering tab instead, at the bottom there's a checkbox for Emulate Media which will enable a dropdown that you can select Print in, similar to the provided screenshot – James Gray Oct 01 '16 at 00:47

score 16 · Answer 5 · answered Feb 28 '11 at 20:46

16

There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):

Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features

Now you are viewing the print CSS and you can reload your page indefinitely. Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.

HTH.

answered Feb 28 '11 at 20:46

Capsule

6,015
1
17
27

7

renders different than print preview, substantially. perhaps this is a quirk in my css. in any case, it doesn't solve the problem. thanks though. – heartpunk Mar 02 '11 at 02:50
Yeah, completely different for me too. I followed this jsfiddle (http://jsfiddle.net/2wk6Q/3/) and print preview shows pages with red margins, but this is just totally different. – duality_ Oct 26 '13 at 15:48
1

I must say that this "workaround" works best for me. Maybe I am lucky and thats why there are only small differences between native print screen and the web developers print screen but it definately helped me find out why gaps appear and whats most important - i can go throught the code with firebug and see what is going on – Erik Čerpnjak Dec 02 '15 at 07:31

score 13 · Answer 6 · edited Jun 20 '20 at 09:12

13

Chrome's UI is different again as of v53.

I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.

Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.

Now scroll down in the Rendering section. It's often below the fold.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 16 '17 at 21:02

TrophyGeek

5,285
2
32
29

1

You just saved me days of print.css debugging. You are awesome! – zazvorniki Mar 14 '18 at 18:59

score 8 · Answer 7 · answered Feb 12 '15 at 17:05

8

Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:

chrome print css emulation

answered Feb 12 '15 at 17:05

Anil Vangari

560
7
12

It took me a little time to identify the "Media" tab. I kept looking for it in the "Device" tab. – Lorin Rivers Nov 04 '15 at 19:45

score 5 · Answer 8 · answered Mar 16 '10 at 07:44

5

Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.

answered Mar 16 '10 at 07:44

Tatu Ulmanen

115,522
31
176
180

15

Except the normal browsing mode doesn't have pages, so I have no idea how content will flow. Normal browsing mode has a width of a certain number of pixels, while a page has a width of a certain number of inches or centimeters. There are fundamental implementation-independent differences between screen and print. Debugging between those is what I'm after. – Jim Puls Mar 16 '10 at 08:09
1

On chrome the rendering is quite different using this suggestion alone. Won't work. – heartpunk Feb 22 '11 at 23:43
"Page" width isn't hard to nail down, it's height that's really difficult. Both browsers and printers will play a role in the 11in headache. Web pages are continuous length. Without a guarantee of output device type and browser, I don't think you'll ever hit it on the mark every time. Using a HTML to PDF approach would work, but that's beyond the scope of your question. – Dawson Feb 23 '11 at 05:25

score 3 · Answer 9 · answered Aug 20 '19 at 17:28

2019 - Updated instructions

Open Chrome inspector
- From Mac => option + command + i
- From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow

score 0 · Answer 10 · edited Mar 01 '11 at 17:52

0

If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.

Heres an example of how this can be done with JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

edited Mar 01 '11 at 17:52

SwDevMan81

45,922
20
140
177

answered Feb 28 '11 at 11:32

Blowsie

38,136
15
81
108

2

The problem with this approach is that if a user simply selects "Print..." in their browser, this javascript function will never get invoked. – Ken Liu Mar 02 '11 at 19:05
you don't need to display the print function to the user, you can simply use it for debugging purposes if you wish – Blowsie Mar 03 '11 at 10:32
This is an over engineered solution to something the browser already does. Just use a `media="print"` and `media="screen"` respectively for your stylesheets and just use the browser menu or key combos to invoke print preview. (In this case it's no different than opening a popup) And if you are just debugging, apply the `media="screen"` attribute to your print styles until you are done debugging. – ORyan Mar 26 '15 at 17:02

score 0 · Answer 11 · answered Apr 08 '21 at 16:21

0

In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.

One drawback is that it does not clearly delineate the page boundaries.

answered Apr 08 '21 at 16:21

djvg

5,523
3
36
64

score -1 · Answer 12 · answered Mar 01 '11 at 16:41

-1

enter image description here

In DreamWeaver there is a toolbar that shows virtually any rendering option you want: screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc. This is what I use especially because it: instantly shows a preview with 1 single press of a button.

answered Mar 01 '11 at 16:41

Sam

15,156
23
85
134

1

good to know, but it would require using a different rendering engine than what we develop for, and still requires more than a reload. thanks though. – heartpunk Mar 02 '11 at 02:52
1

Already back in 2011 this was proprietary, purchase-only software only on limited platforms, which you needed to pay for to get the requested functionality to debug the open web. – Volker E. Dec 16 '17 at 22:59

score -7 · Answer 13 · answered Feb 28 '11 at 19:30

I use macros to send keypress and mouse clicks repeatedly. Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.

Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)

Suggestions for debugging print stylesheets?

13 Answers13

Linked

Related