Pregunta ¿Cómo utilizar el Inspector de elementos de Chrome en el modo de vista previa de impresión?


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, utilizo el Element Inspector de Chrome. Sin embargo, esto no existe en el modo de vista previa de impresión.

¿Hay un complemento de Chrome u otra forma de cambiar el medio de visualización dentro de 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 enfocado 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, todo / braille / realzado / de mano / imprimir / proyección / pantalla / habla / tty / televisión).


514
2018-03-02 22:03


origen


Respuestas:


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

Chrome v52 +:

  • Abre el Herramientas de desarrollo (Windows: F12 o Ctrl+Cambio+yo, Mac: Cmd+Optar+yo)
  • Haga clic en el Personaliza y controla DevTools botón de menú hamburguesa y elija Más herramientas> Configuración de representación (o Representación en versiones más nuevas).
  • Comprobar el Emular medios impresos casilla de verificación en el Representación pestaña y seleccione la Impresión tipo de medio.

Chrome v52+

Chrome v48 + (Gracias Alex por notarlo):

  • Abra las Herramientas de desarrollo (CTRLCAMBIOyo o F12)
  • Haga clic en el Alternar el modo del dispositivo botón en la esquina superior izquierda (CTRLCAMBIOMETRO)
  • Asegúrese de que la consola se muestra haciendo clic Muestra la consola en el menú en (1) (ESC la tecla alterna la consola si la barra de herramientas del desarrollador tiene foco).
  • Comprobar Emular medios impresos en la pestaña de renderizado que se puede abrir seleccionando Representación en el menú en (2).

Chrome v48+

Chrome v46 +:

  • Abra las Herramientas de desarrollo (CTRLCAMBIOyo o F12)
  • Haga clic en el Alternar el modo del dispositivo botón en la esquina superior izquierda (1).
  • Asegúrese de que la consola se muestra haciendo clic en el botón de menú (2)> Muestra la consola (3) o presionando el ESC tecla para alternar la consola (solo funciona cuando Developer Toolbar tiene el foco).
  • Abre el Emulación (4)> Medios (5) pestañas, verificar Medios CSS y seleccione impresión (3)

Chrome v46+ support

Chrome v43 +:

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

Emulate print media query on Chrome v43

Chrome v42:

  • Abra las Herramientas de desarrollo (CTRLCAMBIOyo o F12)
  • Haga clic en el Alternar el modo del dispositivo botón en la esquina superior izquierda (1).
  • Asegúrese de que el cajón se muestra haciendo clic en Mostrar cajón botón (2) o presionando ESC tecla para alternar el cajón.
  • Debajo Emulación> Medios comprobar Medios CSS y seleccione impresión (3)

Emulate print media query on Chrome v42


871
2018-04-30 07:53



Cambiado en Chrome 32 35+

(En Chrome 35+, la pestaña "Emulación" está presente por defecto. 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. Golpear Esc para 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.

Enable Overrides


165
2018-01-16 08:38



Desde Chrome 32 tienes el CSS media opción en el Screen sección del cajón Emulation lengüeta.

Solo habilítalos, selecciona print como el tipo de medio de destino, y - he aquí - su página se representa [casi] de la misma forma en que se imprimirá.

Utilizar Esc para abrir el cajón si no es visible.


72
2018-03-09 14:54



Por favor mira Este artículo

Open chrome dev tools inspector

A continuación, vaya a la pestaña "anulaciones"

Open config/Settings


21
2018-02-26 18:27



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

Los primeros pasos no han cambiado:

  1. prensa F12 para mostrar las herramientas de desarrollo

  2. prensa ESC para abrir la consola

De acuerdo con las respuestas anteriores, la configuración podría encontrarse 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 se puede abrir haciendo clic en los tres puntos a la izquierda de la pestaña "Consola".

Tab selection

Setting selection


20
2018-01-27 14:55



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

  1. Herramientas de desarrollo abierto - Ctrl / Cmd + Cambio + yo o haga clic derecho en la página y seleccione 'Inspeccionar'.

  2. Golpear Esc para abrir el cajón adicional.

  3. Si 'Representación' no se está mostrando todavía, haga clic en el botón de 3 puntos y elija 'renderizar'.

  4. Marque la casilla 'Emular medios impresos'.

Desde allí, Chrome le mostrará una versión impresa de su página y podrá inspeccionar el elemento y solucionarlo como lo haría con la versión del navegador.

Image of Chrome 49+ Print Preview option in Dev Tools


10
2017-11-23 19:09



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

Google Chrome Print background color ignored


6
2017-10-18 06:27



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

Chrome v51 Mac Emulate media selector appears in the bottom

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


6
2018-05-27 12:45