See print css in the browser

Question

I wanted find out how i could inspect my print css just like when i inspect my elements with the normal css and i looked all over for plugins and such stuff

Like when you preview a print in chrome but where your able to inspect the elements

enter image description here

@media print {
   p{color:red;}
   ..... my css
}
.sharebar {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 195;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

How can this be a duplicate when the other "dupe" is only chrome oriented this is a question not a browser specific question — Simon Dragsbæk, Nov 17 '16 at 09:10
further to that, the keyword search I used would never have picked that other question up, but this one came up. If it isn't searchable, it shouldn't be marked as duplicate. Some answer from the dark ages buried in the crypts of obscurity shouldn't count as a 'duplicate answer' — Tim Ogilvy, Jun 24 '17 at 05:58

andyb · Accepted Answer · 2014-12-17T20:48:05.430

32

Chrome has this functionality out of the box in the DevTools - see CSS Media Type Emulation.

edited Dec 17 '14 at 20:48

answered Apr 19 '13 at 13:01

andyb

43,435
12
121
150

1

you cant inspect element in printpreview screen... – Muneem Habib Jun 25 '15 at 12:54
2

Maybe Chrome has changed since this answer was posted, but I don't see anything in there that let's you preview the print media type. All I see are settings related to mobile devices. – Knyri Jul 14 '16 at 15:17
3

@Knyri yes it looks like Chrome has changed a lot since this answer. A much better answer that has solutions for all versions of Chrome is http://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode – andyb Jul 14 '16 at 23:26

score 12 · Answer 2 · edited May 23 '17 at 12:34

12

Do this in chrome:

Open the Developer Tools
Click the "Customize and control DevTools" hamburger menu button.
Choose More tools > Rendering settings.
Check the "Emulate CSS Media" checkbox at the Rendering tab and select the Print media type.

Very detailed steps can be found here.

edited May 23 '17 at 12:34

Community

1
1

answered Sep 28 '16 at 16:34

Miguel

1,575
1
27
31

score 7 · Answer 3 · answered Apr 19 '13 at 13:00

7

If you're using Firefox, you can use the Web Developer Toolbar for this (and many other good things!)

http://chrispederick.com/work/web-developer/

After installing the toolbar, the option can be found under CSS -> Display Styles By Media Type -> Display Print Styles.

answered Apr 19 '13 at 13:00

sevenseacat

24,699
6
63
88

it's not working. I did the last steps which u have mentioned. Thanks – Santanu Sep 21 '15 at 14:04

See print css in the browser

3 Answers3