¿Usa el inspector de elementos de Chrome en el modo Vista previa de impresión?


666

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).


Respuestas:


1158

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 v52 +

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 v48 +

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 v46 + soporte

Chrome v43 +:

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

Emular consulta de medios impresos en Chrome v43

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).

Emular consulta de medios impresos en Chrome v42


14
Puedo confirmar esto, así que hice de esto la respuesta aprobada. No estoy seguro de por qué siguen insistiendo en moverlo cada pocos lanzamientos.
David Stinemetze

8
Lo encontré en Chrome 48, pero lo volvieron a mover: ve a "renderizado" en el cajón, marca "Emular medios impresos".
Olemak

77
¡Estos cambios frecuentes son lo más tonto que he visto salir de Google hasta ahora! Qué pérdida de tiempo.
isapir

8
Desafortunadamente, esto no siempre emula lo mismo que muestra la vista previa de impresión, por lo que no es tan bueno para la depuración. Sin embargo, es bueno para ver qué diseño general y estilos son.
Confuzing

18
Este emulador de 'impresión' es completamente inútil. No emula correctamente la página, ya que lo que ve en el navegador no se parece en nada a lo que ve en la vista previa de impresión. ¿Alguien tiene una solución de trabajo?
Ian S

168

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.

Habilitar anulaciones


1
Para reflejar esta actualización, seguí adelante y marqué esto como la respuesta correcta ahora.
David Stinemetze

3
La pestaña Anulaciones ya no está allí en Chrome 36 (no sé cuándo se cambió). La pestaña Emulación está presente de forma predeterminada.
ebruchez

1
¿Soy solo yo o la opción de medios CSS desapareció en Chrome 36? Ahora solo puede seleccionar en función de un dispositivo móvil específico. ACTUALIZACIÓN: doh. Según las instrucciones anteriores, literalmente tiene que hacer clic en "Pantalla". No es obvio de inmediato que se pueda hacer clic.
Ted

1
El único problema que he encontrado, ahora que lo estoy usando, es que en realidad no es lo que Chrome imprime. Esto es extremadamente evidente con Bootstrap 3.x donde los medios usarán grid-md mientras que la vista previa de impresión usa grid-sm
Sammaye

3
Chrome 39 está debajo de "medios". debes habilitar la emulación del dispositivo haciendo clic primero en el pequeño ícono del teléfono a la izquierda de la barra superior de devtools y luego haciendo clic en los 3 puntos en la parte superior derecha del emulador del dispositivo.
Danny Staple

73

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.


Esperaba que fuera más simple que esto, pero supongo que tendrá que hacerlo por ahora. Sería bueno si esto finalmente se integrara en una de las herramientas automáticamente.
David Stinemetze

Cuando tenga la oportunidad, tendré que intentarlo. Puedo seguir con el método de @ Jon-YYC hasta entonces.
David Stinemetze

Estoy usando la versión 28 en mac y no veo esta opción ... ¿alguien más tiene este problema?
Aaron Hill

2
@AaronHill Estoy usando la versión 28 en una Mac y no tengo ningún problema. Aunque tal vez en realidad no entró en el cuadro de diálogo de configuración. Puede encontrar esto haciendo clic en el icono de engranaje en la esquina inferior derecha de Element Inspector.
David Stinemetze

2
Esta respuesta ahora está desactualizada.
Flimm

23

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".

Selección de pestaña

Selección de ajustes



14

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.

Imagen de la opción de Vista previa de impresión de Chrome 49+ en Dev Tools


¿Tiene una fuente para obtener instrucciones de DevTools actualizadas? Puedo entender la mayoría de ellos, pero estaba buscando todo esto y siento que hay muchas nuevas características útiles que me están ocultando.
Crystal Miller

1
La mejor fuente que encontré para información general sobre herramientas de desarrollo es developers.google.com/web/tools/chrome-devtools/?hl=en . También disfruté mucho viendo las actualizaciones de la última versión en este video: youtube.com/watch?v=dJR-n8szgBc .
NilsyNils

7

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.

Color de fondo de Google Chrome Print ignorado


6

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.

Chrome v51 Mac El selector de medios de emulación aparece en la parte inferior

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


Ya sea que seleccione imprimir o pantalla en "emular medios", todavía se imprime con la hoja de estilo de impresión. Terminé usando una extensión de captura de pantalla de página completa en su lugar. chrome.google.com/webstore/detail/full-page-screen-capture/…
niknah

4

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

captura de pantalla 1

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.

captura de pantalla 2

Espero eso ayude.


4

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

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

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.


1

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.