21

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;
}
2
  • 1
    How can this be a duplicate when the other "dupe" is only chrome oriented this is a question not a browser specific question Nov 17, 2016 at 9: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, 2017 at 5:58

3 Answers 3

32

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

3
  • you cant inspect element in printpreview screen... Jun 25, 2015 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, 2016 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 stackoverflow.com/questions/9540990/…
    – andyb
    Jul 14, 2016 at 23:26
12

Do this in chrome:

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

Very detailed steps can be found here.

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.

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.