How do you debug printable CSS?

Question

I use Firebug and IE Developer Toolbar all the time to debug tricky CSS problems. But occasionally, a tricky bug comes up that only appears when you go to print the page.

What techniques/tools do you use to diagnose problems like this? Is there a way to get more use out of traditional CSS debugging tools in print view?

Updated: I already use a PDF printer to avoid wasting paper; my problem is that I can't right-click on the printed DOM. Some of the other answers below are quite helpful, thanks. :-)

Better answer over here: http://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets — Mark E. Haase, Oct 26 '11 at 17:13
related: https://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets , https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ — , Dec 05 '17 at 03:20

Wolfgang Ulmer · Answer 1 · 2019-11-01T21:34:51.333

84

Just found a comment by lee-penkman about a new feature in Firefox here: Press Shift-F2 in Firefox to open the browser console (not the javascript console), then enter media emulate print. Works absolutely great!

Update Sept. 2018: Starting with Firefox 62, the developer console has disappeared. There doesn't seem to be a way to activate print style emulation now.

Update Nov. 2019: It seems that in Firefox 69, there is again a new button for print style emulation. See the other answer on this page: https://stackoverflow.com/a/58015662/195476

edited Nov 01 '19 at 21:34

answered May 27 '14 at 10:15

Wolfgang Ulmer

3,237
2
19
13

6

This worked great for me once I paid attention to what you actually said to do rather than assuming I knew. This isn't in the console in the F12 tools, it's the developer toolbar. Exactly what I was looking for. – Steve Hiner Jun 09 '14 at 07:03
This is some great feature that would have solved a lot of problems that I had in the past... +1 – Erik Čerpnjak Dec 02 '15 at 07:35
8

Sadly this feature doesn't behave 100% like the actual print function. [THIS](http://i.imgur.com/94mfKAt.png) is with the `media emulate print` option enabled, while [THIS](http://i.imgur.com/SpKLdZz.png) is the actual Firefox's print preview. – Luca Regazzi May 09 '16 at 08:46
1

On Mac: `fn+shift+F2` – Nathan Arthur Feb 08 '18 at 17:59
But this isn't representing the real print layout? – Sireini May 09 '18 at 08:40
4

The Developer Toolbar has been removed as of Firefox 62: https://developer.mozilla.org/en-US/docs/Tools/GCLI. See https://stackoverflow.com/questions/47877112/firefox-57-quantum-emulate-print-styles – nathan Sep 16 '18 at 14:41
1

See the [answer below](https://stackoverflow.com/a/58015662/4194079). You should consider editing your answer and redirect readers toward it. – keepAlive Oct 31 '19 at 12:15

score 54 · Accepted Answer · answered Mar 28 '16 at 17:57

54

In Chrome 51:

Open devtools (CTRL + F12 or CTRL + SHIFT + I) and click on the ... menu, click More Tools > Rendering settings to open the Rendering tab of the developer console (alternatively, if the console is open just navigate to this tab).

In that tab, select and check the box for Emulate Media: print.

answered Mar 28 '16 at 17:57

Simon Sarris

58,131
13
128
161

Beware: this won't emulate things like hiding background images/colors (which the firefox answer does). – Gavin S. Yancey Apr 22 '17 at 08:02
Is there a print emulator on IE? – Menna Ramadan Oct 07 '20 at 13:04

score 23 · Answer 3 · answered Apr 07 '09 at 17:42

23

I use the WebDeveloper plugin and the CSS --> Display CSS by Media Type --> Print to view the CSS as it would when printed. Firebug's inspection utilities work with the CSS as filtered by the plugin.

answered Apr 07 '09 at 17:42

tvanfosson

490,224
93
683
780

20

Sadly, that view doesn't even remotely resemble what Firefox actually prints (it seems to use screen-only styles too when printing). I didn't find any better option than frequent use of the print preview option while editing styles in Firebug. – Tgr Oct 15 '10 at 12:04
1

Indeed, I think it's because there is no notion of pages... but at least, you can have a look at it without having to preview it. – gamov Jun 22 '11 at 08:56
3

It appears to use ONLY print styles. A nice trick is to not only set your specific media types, but also set all other stylesheets to media="all, print". Works for me :-) – Jeroen Jan 16 '13 at 13:55

score 8 · Answer 4 · edited Apr 14 '20 at 21:38

8

In Firefox 69, I found a button to simulate print media. Just open the Developer Tools (F12) and click on Inspector. The toggle button is the leftmost icon that's in the highlighted section in the screenshot below, the one that looks like a sheet of paper.

edited Apr 14 '20 at 21:38

sameers

4,447
2
28
42

answered Sep 19 '19 at 16:50

mzuther

1,114
1
12
24

1

This should be considered as the FireFox-related answer. – keepAlive Oct 31 '19 at 12:14
Yes, almost missed that little blue sheet of paper icon, thanks – IliasT May 29 '20 at 17:12
click, but nothing happend – Andrii Kovalenko May 31 '20 at 14:21
@Andrii Could you please elaborate? – mzuther Jun 14 '20 at 07:13

score 6 · Answer 5 · answered Apr 07 '09 at 17:45

I use Firefox and the developer toolbar.

I use the real time css edit tool in the task bar, it's pretty usefull to modify your css on the fly on see the results in real time.

I also use the outline feature, which the div and stuff like that on mouse over, on your website. Really helpful to find div.

For the print problem, go to CSS -> Display CSS style by media -> print

There are a lot of other tool available in this one, I probably use about 10% of it.

Try maybe you find something usefull.

score 4 · Answer 6 · answered Apr 20 '15 at 14:41

In chrome developer tools (F12 \ Ctrl(cmd on mac) + Shift + C): In the emulation tab (From Chrome 32 onward IMHO), there is a tab for 'Media'.

There you can check the media emulation checkbox and select the media you would like to emulate ('print', 'screen' etc.)

score 3 · Answer 7 · answered Mar 30 '11 at 23:47

3

How about just listing your print CSS last, and removing the "print" condition from your CSS link or import statement? Then you're debugging the print CSS in the browser window.

answered Mar 30 '11 at 23:47

danblaker

481
4
6

3

just gotta make sure you set `#body { width: 8.5in; height:11in;}` – ZMorek Oct 03 '11 at 21:37
Brilliant idea! This was extremely effective for me – veeTrain Mar 27 '13 at 17:51
Did not work for me in Firefox v22. Looked very different than the actual print. – reflexiv Jul 08 '13 at 16:31
Worked in FF37. The print link tag is the last one in the list of css link tags. Switched the media attribute in that link tag from "print" to "screen". Left all other link tags as is. – Rich C May 07 '15 at 02:41

score 1 · Answer 8 · edited Feb 20 '19 at 11:38

I always used web developer toolbar (as described in the other answers), but Firebug seems to miss some styles from time to time. So I added a Bookmark to my browser and added the following Javascript as URL of the bookmark. Now I can simply switch to print style by clicking the bookmark:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

The code above finds all stylesheet links, tests if it is media=print and if so it changes it to media=all (and hides all media=screen by replacing it with media=dontshow) and reloads the stylesheets by adding a time token to the URL. The basic reload script is from someone else, I added media part. This works great for me!

This would be the more readable version of the JavaScript URL above for explanation:

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

score 1 · Answer 9 · answered Apr 07 '09 at 17:40

1

I use the Adobe PDF virtual printer, because it's the closest thing to a real printer you'd get, without wasting ink and paper.

Anyway, it's recommended to have a separate CSS for prints, with much simpler graphics and less of the images you use just for design purposes.

answered Apr 07 '09 at 17:40

evilpenguin

5,210
6
38
48

Yes, it's the separate CSS that I'm trying to debug. (PDF printer is a good tip; I use that a lot.) – Dan Fabulich Apr 07 '09 at 17:45

score 0 · Answer 10 · answered Apr 07 '09 at 17:44

0

Print to Microsoft XPS Document Writer if you don't want to pay money. Or use SnagIt if you've got the funds (free trial on site).

answered Apr 07 '09 at 17:44

Mike Robinson

24,069
8
59
83

How do you debug printable CSS?

10 Answers10

Linked