¿Utiliza el inspector de elementos de Chrome en el modo de vista previa de impresión?

Resuelto David Stinemetze asked hace 12 años • 11 respuestas

Estoy trabajando en el desarrollo de un sitio web y necesito trabajar en la vista de impresión. Normalmente, cuando tengo problemas de diseño, uso el Inspector de elementos de Chrome. Sin embargo, esto no existe en el modo de vista previa de impresión.

¿Existe un complemento de Chrome o alguna otra forma de cambiar el medio de visualización dentro del propio Chrome para ver una página como lo haría una impresora? Supongo que no tiene que ser una solución específica de Chrome, pero ese es mi navegador principal, por lo que sería bueno tener una solución en el navegador.

En este momento estoy centrado sólo en el medio de vista previa de impresión, pero sería ideal poder cambiar a cualquiera de los tipos de medios admitidos (es decir, todo/braille/en relieve/portátil/impresión/proyección/pantalla/voz/tty/ televisor).

David Stinemetze avatar Mar 03 '12 05:03 David Stinemetze
Aceptado

Nota: Esta respuesta cubre varias versiones de Chrome; desplácese para ver v52 , v48 , v46 , v43 y v42 , cada una con sus cambios actualizados.

Cromo v52+:

  • Abra las herramientas de desarrollo (Windows: F12o Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
  • Haga clic en el botón del menú de hamburguesas Personalizar y controlar DevTools y elija Más herramientas > Configuración de renderizado (o Renderizado en versiones más nuevas).
  • Marque la casilla de verificación Emular medios de impresión en la pestaña Representación y seleccione el tipo de medio de impresión .

Cromo v52+

Chrome v48+ (Gracias Alex por darte cuenta):

  • Abra las herramientas para desarrolladores ( CTRLSHIFTIo F12)
  • Haga clic en el botón Alternar modo de dispositivo en la esquina superior izquierda ( CTRLSHIFTM).
  • Asegúrese de que se muestre la consola haciendo clic en Mostrar consola en el menú en (1) ( ESCla tecla alterna la consola si la barra de herramientas del desarrollador tiene el foco).
  • Marque Emular medios de impresión en la pestaña de renderizado que se puede abrir seleccionando Representación en el menú en (2).

Cromo v48+

Cromo v46+:

  • Abra las herramientas para desarrolladores ( CTRLSHIFTIo F12)
  • Haga clic en el botón Alternar modo de dispositivo en la esquina superior izquierda (1).
  • Asegúrese de que se muestre la consola haciendo clic en el botón de menú (2) > Mostrar consola (3) o presionando la ESCtecla para alternar la consola (solo funciona cuando la barra de herramientas del desarrollador tiene el foco).
  • Abra las pestañas Emulación (4) > Medios (5) , verifique los medios CSS y seleccione Imprimir (3).

Compatibilidad con Chrome v46+

Cromo v43+:

  • El icono del cajón en el paso 2 ha cambiado.

Emular la consulta de medios impresos en Chrome v43

Cromo v42:

  • Abra las herramientas para desarrolladores ( CTRLSHIFTIo F12)
  • Haga clic en el botón Alternar modo de dispositivo en la esquina superior izquierda (1).
  • Asegúrese de que se muestre el cajón haciendo clic en el botón Mostrar cajón (2) o presionando la ESCtecla para alternar el cajón.
  • En Emulación > Medios, marque Medios CSS y seleccione Imprimir (3).

Emular la consulta de medios impresos en Chrome v42

lmeurs avatar Apr 30 '2015 07:04 lmeurs

Cambiado en Chrome 32 35+

(En Chrome 35+, la pestaña "Emulación" está presente de forma predeterminada. Además, la consola está disponible desde cualquier pestaña principal).

  1. En DevTools, vaya a configuración-> Anulaciones
  2. habilitar "Mostrar vista de emulación en el cajón de la consola"
  3. Cierra la configuración, ve a la pestaña 'Elementos'
  4. Presiona Escpara abrir la consola
  5. Elija la pestaña "Emulación", haga clic en "Pantalla"
  6. Desplácese hacia abajo hasta "Medios CSS", seleccione "imprimir"

Esta opción no está (¿todavía?) disponible en la pestaña de la consola.

Habilitar anulaciones

Noco avatar Jan 16 '2014 08:01 Noco

Desde Chrome 32 tienes la CSS mediaopción en el Screenapartado de la Emulationpestaña del cajón.

Simplemente habilítelo, selecciónelo printcomo tipo de medio de destino y, he aquí, su página se representa [casi] de la forma en que se imprimirá.

Úselo Escpara abrir el cajón si no está visible.

Alexander Pavlov avatar Mar 09 '2012 14:03 Alexander Pavlov

Con los atajos disponibles, la forma más rápida es

  1. Abra las herramientas de desarrollador

    • Windows: F12o Ctrl+ Shift+I
    • mac: Cmd+ Opt+I

  2. Abra el menú de comandos

    • Ventanas: Ctrl+ Shift+P
    • mac: Cmd+ Shift+P

  3. Escriba printy seleccione Emular tipo de medio de impresión CSS en el menú contextual

    Cambiar la emulación del tipo de medio a través del menú de comandos

Al observar la respuesta excelente y actualmente más votada de lmeurs , creo que esta solución también podría permanecer estable con el tiempo.

Kariem avatar Apr 25 '2019 06:04 Kariem