usar teclado inspeccionar guardar google elementos elemento como chrome cambios google-chrome google-chrome-devtools web-inspector print-preview

google-chrome - teclado - inspeccionar elemento google chrome



¿Usando el Inspector de elementos de Chrome en el modo Vista preliminar? (10)

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

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.

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

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 + I o haga clic derecho en la página y seleccione ''Inspeccionar''.

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

  3. Si ''Rendering'' no se está mostrando, haga clic en el kebab de 3 puntos y seleccione ''rendering''.

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

Desde allí, Chrome le mostrará una versión impresa de su página y podrá inspeccionar elementos y solucionar problemas como si fuera la versión del navegador.

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.

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.

Por favor vea este artículo

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

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

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

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

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.