google-chrome guardar - ¿Usando el Inspector de elementos de Chrome en el modo Vista preliminar?




usar como (9)

Chrome v50:

Camino 1:

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

Camino 2:

  1. Consola abierta [esc]
  2. Menú de la consola> renderizado

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 de Chrome, para ver una página como lo haría una impresora? Supongo que no tiene 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 compatibles (es decir, todos / braille / en relieve / portátil / imprimir / proyección / pantalla / habla / 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: F12 o Ctrl + Shift + I , Mac: Cmd + Opt + I )
  • Haga clic en el botón de menú Personalizar y controlar DevTools hamburguesa y seleccione Más herramientas> Configuración de procesamiento (o Procesamiento en versiones más recientes).
  • 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 .

Chrome v48 + (Gracias Alex por darse cuenta):

  • Abra las herramientas del desarrollador ( CTRL MAYÚS I o F12 )
  • Haga clic en el botón Cambiar modo de dispositivo en la esquina superior izquierda ( CTRL MAYÚS M ).
  • Asegúrese de que se muestre la consola haciendo clic en Mostrar consola en el menú en (1) (La tecla ESC alterna la consola si la barra de herramientas del desarrollador está enfocada).
  • Verifique Emular medios de impresión en la pestaña de renderización que puede abrirse seleccionando Rendering en el menú en (2).

Chrome v46 +:

  • Abra las herramientas del desarrollador ( CTRL MAYÚS I o F12 )
  • Haga clic en el botón Cambiar modo de dispositivo en la esquina superior izquierda (1).
  • Asegúrese de que se muestra la consola haciendo clic en el botón de menú (2)> Mostrar consola (3) o presionando la tecla ESC para alternar la consola (solo funciona cuando la barra de herramientas del desarrollador tiene el enfoque).
  • 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 del desarrollador ( CTRL MAYÚS I o F12 )
  • Haga clic en el botón Cambiar modo de dispositivo en la esquina superior izquierda (1).
  • Asegúrese de que se muestra el cajón haciendo clic en el botón Mostrar cajón (2) o presionando la tecla ESC para cambiar el cajón.
  • En Emulación> Verificación de medios, compruebe los medios CSS y seleccione Imprimir (3).


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

Los primeros pasos se mantienen sin cambios:

  1. Pulsa F12 para que aparezcan las herramientas de desarrollo.

  2. Pulsa ESC para abrir la consola

De acuerdo con 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 "Rendering", que puede aparecer haciendo clic en los tres puntos a la izquierda de la pestaña "Console".


Desde Chrome 32 tiene la opción de CSS media en la sección Screen de la pestaña Emulation del cajón.

Simplemente habilítelo, seleccione print como el tipo de medio de destino y, he aquí, su página se representa [casi] de la forma en que se imprimirá.

Usa Esc para abrir el cajón si no está visible.


Por favor vea este artículo

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


En Chrome v51 en una Mac, encontré la configuración de renderización haciendo clic en la esquina superior derecha, seleccionando Más herramientas> Configuración de renderización y presionando 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 agradezco a los que proporcionaron la respuesta sin las imágenes.


Chrome v67 (mac):

  1. Mantenga presionado Cmd + opt + j para abrir las herramientas de desarrollo
  2. haga clic en ... en el lado derecho y elija: Más herramientas >> Representación
  3. Cuando la ventana de Representación aparece en la parte inferior de la pantalla, emule la sección de Medios de 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 un mac:

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

Cómo obtener la vista de "pantalla" para imprimir: cuando la ventana de Representación aparezca en la parte inferior de la pantalla, emule la sección de CSS Media y elija: "Pantalla" en el menú desplegable.

Espero eso ayude.


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. Cerrar configuración, vaya a la pestaña 'Elementos'
  4. Pulsa Esc para abrir la consola.
  5. Seleccione 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.


Actualizar

Realicé pruebas adicionales y llegué a la misma conclusión que el Número 123013 que se detalla a continuación. Creo que esto es sólo un error de DevTools.

DevTools> Red aparece para representar incorrectamente la fecha. Sin embargo, DevTools> Resources muestra correctamente la fecha similar a otros navegadores.

Además, otra cookie que creé expiró correctamente. Esto se reflejó en DevTools> Recursos pero no en DevTools> Red. .

Resultados de la prueba

setcookie('foo', 'bar', time()+3600, "/", NULL, false, true);

Chrome v24.0.1312.57
  Resources > Cookies   Thu, 14 Feb 2013 17:08:33 GMT
  Network > Cookies     Invalid Date

Firefox 18.0.2          Thursday, February 14, 2013 11:59:15 AM
IE9 9.0.8112.16421      Thu, 14-Feb-2013 17:06:42 GMT

Finalmente, para concluir, su sintaxis parece correcta. El mensaje "Fecha no válida" parece un error de Chrome.

No pude replicar este problema con Chrome v24.0.1312.57. Configuré varias cookies de prueba con JavaScript y PHP. Chrome no arrojó errores y convirtió correctamente max-age valores de max-age que pasé en los valores de expires correspondientes.

Este error, o algo muy similar, ha sido enviado y aparentemente solucionado.

WebKit

Cromo





google-chrome google-chrome-devtools web-inspector print-preview