1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo se prueba la salida de impresión de los navegadores con herramientas en línea?

¿Cómo se prueba la salida de impresión de los navegadores con herramientas en línea?

2012-05-27 15 views
16

He utilizado (como siempre) @media print reglas para especificar cómo la impresión de una página web debe ser diferente a la versión en línea. Esto funciona bastante bien, pero la prueba es realmente difícil. Lo que por lo general tiene que ver son los pasos siguientes:¿Cómo se prueba la salida de impresión de los navegadores con herramientas en línea?

  1. Crear el estilo diferente de screen y print.
  2. Comience su página en el modo de pantalla
  3. Imprima la página p. Ej. a una impresora PDF.
  4. Mira el resultado.
  5. Trate de encontrar las reglas que se comportan mal.

Lo que me gusta hacer (pero no era capaz de hacerlo con cualquier navegador):

  1. Crear el estilo diferente de screen y print.
  2. Comience su página en el modo de pantalla
  3. entrar en el modo de vista previa de impresión (por ejemplo, para Opera, Firefox está disponible)
  4. uso de las herramientas disponibles, como Firebug (Firefox) o de la libélula (Opera) para inspeccionar el DOM y el estilos actuales
  5. Cambie el CSS sobre la marcha, vuelva a cargar la página, y mire el resultado y el DOM nuevamente.

¿Hay algún navegador o combinación de navegador, complemento y proceso disponible para obtener resultados similares? Si tiene ideas de cómo cambiar las organizaciones de los archivos, con los cambios más mínimos para obtener el resultado deseado, le agradecemos.

Fuente

2012-05-27 mliebelt

Respuesta

8

El plugin de Firefox llamado "Desarrollador web" (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) tiene una opción "Mostrar CSS por tipo de medio".

Fuente

2012-05-27 12:33:28 Pino

+0

Lo he instalado ahora (así como el inspector DOM), y funciona al menos parcialmente para mí. Hay muchos errores de visualización, y a veces simplemente deja de funcionar ... así que tengo que investigar un poco más. – mliebelt

+0

Hmmm, funciona bien aquí. Es uno de los mejores plugins para desarrolladores (después de Firebug, por supuesto). – Pino

+0

La primera vez que lo probé, la entrada del menú 'Mostrar CSS por tipo de medio 'no mostró ninguna diferencia. Después de haber reelaborado la aplicación web (con la técnica descrita en mi respuesta), ahora veo el mismo resultado que al cambiar los tipos de medios. Cosas geniales :-) – mliebelt

1

¿Has probado con Print Friendly Google Chrome extension.

Es una buena extensión que agrega un botón y genera el pdf de la página web con un clic. Espero que sea más fácil que su proceso actual.

Fuente

2012-05-27 12:27:54 Katti

+0

Lo he instalado, y sí, se da una vista más bonita (y más inmediata) la forma en que lo hará se imprime, pero no ayuda a inspeccionar las razones, vea el DOM, ... – mliebelt

+0

Sip esa característica sería más útil. – Katti

0

He encontrado una solución diferente a mi problema inspirado en Using Rails 3.1 assets pipeline to conditionally use certain css.Así es como funciona:

  • uso en el HTML principal presentar las siguientes directivas de hojas de estilo:

    <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

  • aislar todas las reglas en sus hojas de estilo que son

    • apropiada para la pantalla e imprimir (hoja de estilo: application.css)
    • apropiado solo para la pantalla (hoja de estilo: screen.css)
    • apropiado sólo para la impresión (hoja de estilo: print.css)

  • Durante la prueba de la copia impresa de la página web, cambiar las hojas de estilo en su archivo HTML principal:

    <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="screen.css" media="print" rel="stylesheet" type="text/css" /> 
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

Observe el interruptor en la segunda y tercera línea para media="print|screen".

Como resultado, ahora puede llamar a su archivo HTML principal y ver cómo se verá si lo imprime en condiciones normales. Todas las herramientas que usas normalmente (Firefox Firebug, Chrome Developer Tools, Opera DragonFly, ...) funcionarán normalmente, por lo que puedes verificar tu DOM, ver las casillas, cambiar CSS sobre la marcha y simplemente volver a cargar tu página. .

Funciona muy bien para mí, si me tropiezo con algunos inconvenientes, volveré y anotaré eso también.

Fuente

2012-05-28 08:06:07 mliebelt

+0

Separar los archivos CSS por los medios es una mejor práctica. Cambiar los medios en el código HTML es una solución obvia, pero supuse que estabas buscando algo más automático. – Pino

1

Si especifica sus reglas de impresión de CSS & en archivos separados, puede hacerlo fácilmente usando las herramientas de desarrollo de Chrome. Cargue su página y abra las Herramientas de desarrollo. Desde la vista "Elementos", edite la línea media = "print" para que lea media = "all".

Por ejemplo, si se vincula sus hojas de estilo como:

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

Cambio:

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

para leer:

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

que ahora tendrá los estilos de impresión aplicados a la copia en la ventana de tu navegador Puede navegar por los estilos y elementos como lo haría con cualquier otra página web.

Fuente

2012-10-01 15:29:29

1

Esta es una práctica que he encontrado útil con el estilo para la impresión cuando el diseño de la impresión debe ser una modificación del estilo genérico.

  1. crear una hoja de estilo de impresión que utiliza impresión @media {} para enmarcar los estilos de impresión
  2. Aplicar dicha hoja de estilos última
  3. Mientras trabajaba en los estilos de impresión, comentar temporalmente fuera de las líneas que enmarcan sus estilos de impresión
  4. uso de Firebug y web Developer en que forma acostumbrada
  5. Descomente los medios de horquillado

algo como:

 
/* @media print { */ 

    #sidebar {display:none;} 

/* } */

Fuente

2013-02-17 03:14:23

+0

Una variación de esto es editar directamente su archivo CSS usando el Editor de estilos propio de Firefox (Mayúsculas-F7). De esta manera, puede cambiar su "@Media Print" a "@Media All" y ver su CSS de impresión implementado en la pantalla. – ChillyPenguin

15

Chrome Developer Tools tiene esta característica.

  1. Abrir Herramientas de desarrollador de Chrome para la página que desea probar.
  2. Abra el Cajón si no está abierto. (Presione Esc.)
  3. Abra la ficha Emulación.
  4. Haga clic en Medios en el menú de la izquierda.
  5. Comprobar medios CSS y seleccione de impresión desde el cuadro de selección

Fuente: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

Fuente

2014-03-07 00:24:32 jordanbtucker

+3

En Chrome 50, la pestaña del paso 3 se llama "Representación" y la configuración para verificar en el paso 4 es "Emular medios": el paso 5 solo selecciona "imprimir" en el cuadro de selección. – febeling

Cuestiones relacionadas

 Cuestiones relacionadas