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 su 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 solo 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, todos / braille / en relieve / de mano / imprimir / proyección / pantalla / discurso / tty / televisión).

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

Chrome v52 +:

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

Chrome v48 + (Gracias Alex por notarlo):

• Abra las herramientas de desarrollador ( CTRLSHIFTIo F12)
• Haga clic en el botón Cambiar modo de dispositivo en la esquina superior izquierda ( CTRLSHIFTM).
• Asegúrese de que la consola se muestre haciendo clic en Mostrar consola en el menú en (1) (la ESCtecla alterna la consola si Developer Toolbar tiene el foco).
• Marque Emular material de impresión en la pestaña de representación que se puede abrir seleccionando Representación en el menú en (2).

Chrome v46 +:

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

Chrome v43 +:

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

Chrome v42:

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

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. Cierre la configuración, vaya 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 "CSS Media", seleccione "imprimir"

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

Desde Chrome 32 tiene la CSS mediaopción en la Screensección de la Emulationpestaña del cajón .

Solo habilítelo, seleccione 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 es visible.

A partir de Chrome 48 (y quizás algunas versiones anteriores), la función parece haberse movido una vez más:

Los primeros pasos no cambian:

1. Presione F12para abrir las herramientas de desarrollador

2. Presione ESCpara abrir la consola

Según las respuestas anteriores, la configuración se puede encontrar en la pestaña "Emulación". Como se muestra en las imágenes a continuación, ahora se ha movido a la pestaña "Representación", que puede abrirse haciendo clic en los tres puntos a la izquierda de la pestaña "Consola".

Por favor vea este artículo

Luego vaya a la pestaña "anulaciones"

A partir de Chrome 48+, puede acceder a la vista previa de impresión a través de los siguientes pasos:

1. Abra las herramientas de desarrollo - Ctrl/Cmd+ Shift+ Io haga clic derecho en la página y elija 'Inspeccionar'.

2. Presiona Escpara abrir el cajón adicional.

3. Si 'Rendering' aún no se muestra, haga clic en el kebab de 3 puntos y elija 'rendering'.

4. Marque la casilla de verificación 'Emular medios impresos'.

A partir de ahí, Chrome le mostrará una versión impresa de su página y podrá inspeccionar los elementos y solucionar problemas como lo haría con la versión del navegador.

Si está depurando su CSS utilizando Imprimir como PDF en Google Chrome y no se muestran los colores de fondo de su elemento CSS, asegúrese de que la casilla de verificación 'Gráficos de fondo' esté marcada. Pasé casi 30 minutos depurando mi CSS y preguntándome qué está causando que se ignore mi fondo CSS.

En Chrome v51 en una Mac, encontré la configuración de representación haciendo clic en la esquina superior derecha, seleccionando Más herramientas> Configuración de representación y marcando el botón Emular medios en las opciones que se ofrecen en la parte inferior de la ventana.

Gracias a todos los otros carteles que me llevaron a esto, y agradecemos a aquellos que proporcionaron la respuesta sin las imágenes.

Chrome v67 (mac):

1. Mantenga presionado Cmd+opt+jpara abrir herramientas de desarrollo
2. haga clic ...en el lado derecho y elija: Más herramientas >> Representación
3. Cuando aparezca la ventana de Representación en la parte inferior de la pantalla, emule la sección de Medios CSS y elija: "Pantalla" en el menú desplegable.
4. Vaya a "Archivo >> Imprimir" y debería ver la vista que desea imprimir.

Imágenes de la descripción anterior para Chrome v67 en una Mac:

Dónde encontrar la pestaña Representación: haga clic ...en el lado derecho y elija: Más Herramientas >> Representación

Cómo hacer que se imprima la vista de "pantalla": Cuando la ventana de Representación aparece en la parte inferior de la pantalla, emule la sección de Medios CSS y elija: "Pantalla" en el menú desplegable.

Espero eso ayude.

Con accesos directos disponibles, la forma más rápida es

1. Abra las herramientas de desarrollador

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

2. Abre el menú de comandos

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

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

   

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

Chrome v50:

Camino 1:

1. Menú> Más herramientas> Configuración de representación (ver imagen)
2. Abajo: pestaña Renderizado> Emular medios "imprimir"

Camino 2:

1. Abrir consola [esc]
2. Menú de consola> renderizado