Ver css de impresión en el navegador

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Usando el Inspector de elementos de Chrome en el modo Vista preliminar? 10 respuestas

Quería saber cómo podía inspeccionar mi css de impresión, como cuando inspecciono mis elementos con el css normal y busqué complementos y cosas así

Al igual que cuando obtiene una vista previa de una impresión en cromo pero donde puede inspeccionar los elementos

@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 tiene esta funcionalidad fuera de la caja en DevTools - vea la emulación de tipo de medios CSS .

Answer 2

Haz esto en cromo:

1. Abra las herramientas de desarrollo
2. Haga clic en el botón de menú de hamburguesas "Personalizar y controlar DevTools".
3. Elija Más herramientas> Configuración de representación.
4. Marque la casilla de verificación "Emular CSS Media" en la pestaña Representación y seleccione el tipo de medio de impresión.

Los pasos muy detallados se pueden encontrar aquí .

Answer 3

Si está usando Firefox, puede usar la barra de herramientas para desarrolladores web para esto (¡y muchas otras cosas buenas!)

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

Después de instalar la barra de herramientas, la opción se puede encontrar en CSS -> Mostrar estilos por tipo de medio -> Mostrar estilos de impresión.