¿Una forma más rápida de desarrollar y probar hojas de estilo de impresión (evite la vista previa de impresión cada vez)?

179

Este es mi proceso en este momento:

  1. Guardar cambios en print.css
  2. Abra el navegador y actualice la página.
  3. Haga clic derecho y elija Imprimir> Vista previa de impresión (Firefox, pero cualquier navegador realmente)

Es el paso 3 lo que me molesta y me pregunto si es posible eliminarlo del proceso con un complemento o algo así. Simplemente elija ver una página como medio impreso y luego simplemente actualice para ver los cambios.

¿Cómo prueba sus hojas de estilo de impresión? ¿Siempre haces clic en la vista previa de impresión después de una actualización?

css firefox Miguel
fuente
Gracias a todos por las sugerencias. Me encantaría que Mozilla agregara una configuración de desarrollador para habilitar las capacidades de "Actualizar" en la ventana de vista previa de impresión (no predeterminada para evitar la confusión del usuario final, por supuesto). Esa es mi solución ideal, porque (de acuerdo con Faust) generalmente necesito verlo en Vista previa de impresión para mostrar exactamente cómo se mostrará (imágenes de fondo, saltos de página, márgenes, etc.). Chrome podría ayudar un poco, ya que muestra una vista previa de forma predeterminada. También miraré el complemento Firefox PrintPreview recomendado por slolife.
Michael
Esto no funcionará para Mac ya que no hay una opción de Vista previa de impresión, sin embargo, es posible que tenga una opción de PDF en su cuadro de diálogo de impresión donde puede abrir una vista previa "impresa" en un archivo PDF temporal. No estoy seguro de si esta función está integrada en OSX o porque tengo instalado Acrobat.
Neil Monroe
Simplemente haciendo una aclaración, parece que en OSX, la opción Vista previa de impresión no está disponible en el menú Archivo ..., pero con la extensión Vista previa de impresión / impresión, puede tener un botón que la inicia. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Neil Monroe

Respuestas:

208

Puede usar la emulación de tipo de medio de Chrome como se acepta en la publicación Vea print css en el navegador .

ACTUALIZACIÓN 21/11/2017

El documento DevTools actualizado se puede encontrar aquí: Ver una página en modo de impresión .

Para ver una página en modo de impresión:
1. Abra el Menú de comandos . ( tl; dr Cmd+Shift+P (Mac) o Ctrl+Shift+P(Windows, Linux))
2. Comience a escribir Renderingy seleccione Show Rendering.
3. Para el menú desplegable Emular CSS Media , seleccione imprimir .

ACTUALIZACIÓN 29/02/2016

Los documentos de DevTools se han movido y el enlace anterior proporciona información inexacta. Los documentos actualizados sobre la emulación de tipo de medios se pueden encontrar aquí: Estilos de vista previa para más tipos de medios .

Abra el cajón de emulación DevTools haciendo clic en el icono Más anulaciones ••• más anulaciones en la esquina superior derecha de la ventana del navegador. Luego, seleccione Medios en el cajón de emulación.

ACTUALIZACIÓN 12/04/2016

Desafortunadamente, parece que los documentos no se han actualizado con respecto a la emulación de impresión. Sin embargo, el Emulador de medios impresos se ha movido (nuevamente):

  1. Abra Chrome DevTools
  2. Presiona escen tu teclado
  3. Haga clic en ⋮ (puntos suspensivos verticales)
  4. Elija renderizado
  5. Marque Emular medios impresos

Ver captura de pantalla a continuación:

configuración de representación 12/04/2016

ACTUALIZACIÓN 28/06/2016

Los documentos de Google Developers Docs sobre Chrome DevTools y la opción "Emular medios" se han actualizado para Chrome> 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=es#emulate-print-media

Para ver una página en modo de vista previa de impresión, abra el menú principal de DevTools, seleccione Más herramientas > Configuración de representación y, a continuación, active la casilla de verificación emular medios con el menú desplegable configurado para imprimir .

configuración de renderizado 28/06/2016

ACTUALIZACIÓN 24/05/2016

Los nombres de las configuraciones han cambiado una vez más:

Para ver una página en modo de vista previa de impresión, abra el menú principal de DevTools, seleccione Más herramientas > Representación y luego active la casilla de verificación Emular CSS Media con el menú desplegable configurado para imprimir .

emular medios CSS

Patrik Affentranger
fuente
2
@SupaIrish Sí, para Firefox ver la respuesta de Szymon.
djule5
La documentación está completamente desactualizada y no hay emular medios css en ningún lugar dentro del área de "más anulaciones". ¿A donde se fué?
TetraDev
2
Está ubicado debajo de "consola (esc)", luego "3 puntos verticales", luego "renderizado" y luego "emular medios impresos" en la parte inferior. ¿Por qué está tan oculto? No tengo idea.
TetraDev
en osx seleccionando esta opción no parece hacer nada?
v3nt
165

En Firefox, puede escribir Shift+F2para abrir una línea de comando de la Barra de herramientas del desarrollador y luego escribirmedia emulate print

También puede emular otros tipos de medios de esta manera.

Szymon Świtała
fuente
3
Me di cuenta de que esto podría no reflejar la misma vista que se proporciona en la vista previa de impresión, espacialmente cuando se trata de espacios en blanco adicionales, asegúrese de que su vista previa de impresión no sea diferente después de que haya terminado con este subpaso.
jave.web
15
Lamentablemente, el GLCI se eliminó de Firefox con la versión 62. Un arrastre.
zerpsed
44
¿Cómo habilitar esto sin GLCI (shift + F12)?
StR
3
@StR Puede emular estilos de impresión en Firefox de otra manera ahora: stackoverflow.com/questions/47877112/…
TylerH
2
Acabo de probar lo que dijo @TylerH en Firefox v68 y funciona.
StR
22

La extensión de la barra de herramientas de Firefox + Web Developer tiene una forma de habilitar / deshabilitar varias hojas de estilo.

Mira debajo del menú CSS. Hay un menú para deshabilitar y habilitar hojas de estilo individuales y también un menú "Mostrar por tipo de medio".

Además, para reducir los pasos para llegar a PrintPreview en Firefox, pruebe la extensión PrintPreview , que creará un botón de barra de herramientas.

Para Chrome, hay un puerto de esa extensión . Por lo que puedo decir con la versión de Chrome, puede elegir "Mostrar estilos de impresión"

Slolife
fuente
12

No usaría ningún método de prueba que no implique una vista previa de impresión. Hay demasiadas diferencias: las imágenes de fondo no funcionan en absoluto en forma impresa, pero aparecen en contextos normales de pantalla siendo las principales.

En Chrome, control+pva inmediatamente a la vista previa de impresión. (Solo olvide pasar el mouse hasta su barra de menú). Eso es muy facil.

Fausto
fuente
Chrome definitivamente no se adhiere a lo que se muestra en la emulación de medios impresos. Descubrí que si no tiene la función de preimpresión de consulta de medios de Chrome en menos de 2 ms, no se pintará el cambio.
cchamberlain
1
El problema con la vista previa de impresión es que no permite la inspección de elementos, por lo que depurar cosas como el relleno y los márgenes es extremadamente difícil. Ver esos elementos por separado es lo mejor que puede tener al tratar de depurar problemas del cuadro.
Seiyria
6

Simplemente puede deshabilitar sus estilos de pantalla y cambiar su tipo de medio a "pantalla" para su hoja de estilo de impresión durante la prueba. Esto no será exactamente lo mismo que usar una vista previa de impresión real (saltos de página, ancho del documento, etc.), pero aún así le da una muy buena idea.

León
fuente
5

simple para mí (no tener @screenpartes o similar 1 ) con FF :

  • pon la @media print { ...parte al final de tu contenido CSS
  • comentar solo la declaración del contenedor/*@media print {*/ ... /*}*/
    • aplicando así el material de impresión a sus estilos, anulándolos inmediatamente cuando corresponda
  • (Estoy usando LiveReload, por lo que la página de mi navegador se actualiza inmediatamente después de guardar los cambios)
  • (de lo contrario , si no usa LiveReload :) presione CTRL+Rpara volver a cargar la página
  • ahora ya puede hacer muchos ajustes típicos de impresión CSS (estilo de fuente, tamaño de fuente, espacios, colores) donde todavía no se necesita la vista previa de impresión
  • presione ALT+F+Vpara abrir la vista previa de impresión y ALT+Wvolver a cerrarla

1 : si uno los tiene, comentarlos fuera o dentro de ellos, dependiendo de los medios probados, de lo contrario no será un gran problema

Andreas Dietrich
fuente
3

Como se describe en esta otra publicación (¿ Usando el inspector de elementos de Chrome en el modo de vista previa de impresión? ), Puede usar Chrome para simplemente emular la hoja de estilo de impresión. Esto es genial, ya que puede usar el inspector para ver de dónde provienen los estilos en lugar de adivinar cuándo ve aparecer el diálogo de impresión.

Acceda al cuadro de diálogo Configuración de anulaciones haciendo clic en el icono de engranaje en la esquina inferior derecha del Inspector de elementos de Chrome. Luego seleccione imprimir como el tipo de medio de destino.

¡Increíble!

Caridad
fuente
2

Al menos en Chrome: durante el desarrollo, agregue a la etiqueta del cuerpo onload="window.print()". Esto hará que el modo de impresión se abra inmediatamente después de actualizar.

Desafortunadamente, no parece que las herramientas de desarrollo sean muy útiles, ya que es esencialmente un PDF incrustado.

Por cierto, hay formas de eliminar el paso 2. Uno popular es LiveReload.

nafg
fuente
0

Puede intentar eliminar temporalmente su hoja de estilo regular y cargar solo la impresa con una etiqueta de enlace normal.

Andrés
fuente
0

En Chrome 62, cmd-R / cmd-P funciona bien en una Mac para mostrar una buena vista previa de una página con estilo de impresión @media.

Se puede acceder a él a través de los puntos suspensivos verticales en la esquina superior derecha de la ventana del navegador (no de las Herramientas para desarrolladores) / Imprimir ...

Use esc para cancelar la ventana de vista previa.

Entonces, para mi flujo de trabajo con IntelliJ IDEA y Chrome, es: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab y estoy de vuelta en el IDE.

Chrome 62 en Windows 10 tiene el mismo menú Imprimir ... en el mismo lugar, accesible con ctrl-p: imprimir en Chrome 62

Mojo Techno
fuente