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

inspeccionar elemento teclado

Question

Esta pregunta ya tiene una respuesta aquí:

• Sugerencias para depurar hojas de estilo de impresión 12 respuestas

He utilizado (como siempre) @media print rules para especificar cómo la impresión de una página web debería ser diferente a la versión en línea. Esto funciona bastante bien, pero la prueba es realmente difícil. Lo que generalmente tengo que hacer son los siguientes pasos:

1. Crea el estilo diferente para screen e print .
2. Comience su página en el modo de pantalla
3. Imprima la página, por ejemplo, en una impresora PDF.
4. Mira el resultado.
5. Intenta encontrar las reglas que se comportan mal.

Lo que me gustaría hacer (pero no pude hacerlo con ningún navegador):

1. Crea el estilo diferente para screen e print .
2. Comience su página en el modo de pantalla
3. Vaya al modo de impresión de vista previa (por ejemplo, para Opera, Firefox disponible)
4. Utilice las herramientas disponibles como Firebug (Firefox) o Dragonfly (Opera) para inspeccionar el DOM y los 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.

Answer 1

¿Has probado con la extensión Print Friendly Google Chrome?

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 tu proceso actual.

Answer 2

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

Answer 3

Si especifica las reglas CSS de impresión y pantalla 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 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" />

leer:

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

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

Answer 4

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

1. Cree una hoja de estilo de impresión que use @media print {} para enmarcar los estilos de impresión
2. Aplica esa última hoja de estilo
3. Mientras trabaja en estilos de impresión, comente temporalmente las líneas que enmarcan sus estilos de impresión
4. Use Firebug y Web Developer de la manera acostumbrada
5. Descomentar el horquillado de medios

Algo como:

/* @media print { */
#sidebar {display:none;}
/* } */

Answer 5

Chrome Developer Tools tiene esta característica.

1. Abra Herramientas de desarrollo de Chrome para la página que desea probar.
2. Abra el cajón si aún no está abierto. (Presione Esc )
3. Abra la pestaña Emulación .
4. Haz clic en Medios en el menú de la izquierda.
5. Compruebe los medios CSS y seleccione imprimir 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

Answer 6

He encontrado una solución diferente a mi problema inspirada en la canalización de recursos de Using Rails 3.1 para usar condicionalmente ciertos css . Así es como funciona:

• Use en el archivo HTML principal las siguientes directivas para 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

  • apropiado para pantalla e impresión (Stylesheet: application.css )
  • apropiado solo para pantalla (Stylesheet: screen.css )
  • apropiado solo para imprimir (Stylesheet: print.css )

• Durante la prueba de la impresión de su página web, cambie 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 tropezara con algunos inconvenientes, volveré y anotaré eso también.