See print css in the browser [duplicate]

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

@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;
}

Answer 1

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

Answer 2

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.

Answer 3

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.