¿Sugerencias para depurar hojas de estilo de impresión?


238

Recientemente he estado trabajando en una hoja de estilo de impresión para un sitio web, y me di cuenta de que no sabía cómo modificarla de manera efectiva. Una cosa es tener un ciclo de recarga para trabajar en el diseño en pantalla:

  • cambiar código
  • ficha de comando
  • recargar

pero todo ese proceso se vuelve mucho más arduo cuando intentas imprimir:

  • cambiar código
  • ficha de comando
  • recargar
  • impresión
  • entrecerrar los ojos en la imagen de vista previa de impresión
  • abrir PDF en Vista previa para una inspección más profunda

¿Hay herramientas que me estoy perdiendo aquí? ¿El inspector de WebKit tiene una casilla de verificación "pretender que esto es un medio paginado"? ¿Hay alguna magia que Firebug ( estremecimiento ) pueda hacer?


44
¿Qué tal la función "Vista previa de impresión" de un navegador que lo admite (por ejemplo, Firefox)? He depurado (principalmente con precisión) algunas páginas web para imprimirlas.
Halil Özgür

2
posible duplicado de ¿Cómo depurar CSS imprimible?
outis

3
En Firefox, abra la "Barra de herramientas del desarrollador" con Shift + F2, escriba "media emulate print" (o "emu" + Tab + "print"), Enter.
Marcello Nuccio


@MarcelloNuccio Esto debería ser una respuesta. stackoverflow.com/a/28873496/1696030 obtuvo algunos votos positivos para la comparación. "Developer Toolbar" es un poco engañoso, ya que es una interfaz de línea de comandos.
Volker E.

Respuestas:


327

Hay una opción para eso en el inspector de Chrome.

  1. Abra el inspector de DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
  2. Haga clic en el ícono Cambiar modo de dispositivoAlternar botón de modo de dispositivo , ubicado en la esquina superior izquierda del panel DevTools. (Windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
  3. Haga clic en el icono Más anulaciones más anulaciones en la esquina superior derecha de la ventana del navegador para abrir el cajón de devtools.
  4. Luego, seleccione Medios en el cajón de emulación y marque la casilla de verificación Medios CSS .

    ingrese la descripción de la imagen aquí

Esto debería funcionar.

Actualización: los menús han cambiado en DevTools. Ahora se puede encontrar haciendo clic en el menú "tres puntos" en la esquina superior derecha> Más herramientas> Configuración de representación> Emular medios> imprimir.

Fuente: página de Google DevTools *


55
Gracias, eso es lo que estaba buscando, no pude encontrarlo: / El acceso directo ya no funciona. Acabo de hacer el icono de engranaje F12 + en la esquina inferior derecha, luego la configuración está debajo de la pestaña Anulaciones,
Aurelien

18
desafortunadamente no es 100% exacto :(
maazza

99
En Chrome 32.0.1700.14 beta-m Aura, falta "Emular los medios CSS [imprimir]" :(
Rocket Hazmat

11
Esta respuesta necesita ser corregida. A partir de Chrome 48, el emulador de hoja de estilo de impresión ya no está en "Emulación" sino en "Renderizado".
chharvey

13
Menú de tres puntos (lado derecho) en el inspector> Más herramientas> Configuración de representación> Emular medios> imprimir
allicarn

74

Supongo que desea tener el mayor control posible de la ventana impresa sin utilizar un enfoque de HTML a PDF ... Use la pantalla @media para depurar - @media print para css final

Los navegadores modernos pueden darle una visión rápida de lo que sucederá en el momento de la impresión usando pulgadas y puntos en a @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Una vez que su navegador muestre "pulgadas", tendrá una mejor idea de qué esperar. Este enfoque debería terminar con el método de vista previa de impresión. Todas las impresoras funcionarán con pty inunidades, y el uso de la técnica @media le permitirá ver rápidamente lo que sucederá y ajustarlo en consecuencia. Firebug (o equivalente) acelerará absolutamente ese proceso. Cuando ha agregado sus cambios a @media, tiene todo el código que necesita para un archivo CSS vinculado usandomedia = "print" atributo: simplemente copie / pegue las reglas de la pantalla @media en el archivo referenciado.

Buena suerte. La web no fue creada para imprimir. Crear una solución que ofrezca todo su contenido, los estilos iguales a los que se ven en el navegador a veces pueden ser imposibles. Por ejemplo, un diseño fluido para una audiencia predominantemente de 1280 x 1024 no siempre se traduce fácilmente en una impresión láser agradable y ordenada de 8.5 x 11.

Referencia del W3C para purusal: http://www.w3.org/TR/css3-mediaqueries/


Solo quería comentar que este método es bastante inteligente. Es mucho más fácil cambiar el tamaño de la ventana ligeramente para "alternar" los estilos de impresión que usar una función de vista previa de impresión. Si bien a veces aún tiene que hacer eso por compatibilidad con IE y demás, esto es excelente para la iteración inicial de los estilos de impresión.
Chucknelson

@Arrojar. Gracias hombre. Oye, me di cuenta de que mi demo estaba fuera de línea, así que creé un violín para ello. jsfiddle.net/dNEmT
Dawson

20

Chrome 48 puede depurar estilos de impresión dentro de la pestaña Representación .

Haga clic en el ícono de menú en la parte superior derecha del inspector y Configuración de representación .

Editar
para Chrome 58 la ubicación ha cambiado a Web Inspector> Menú> Más herramientas> Representación


44
Chrome 49: F12 (consola del desarrollador) -> ESC (consola) -> Representación -> Emular medios impresos
usuario1477388

19

En Chrome v41, está allí, pero en un lugar ligeramente diferente.

ingrese la descripción de la imagen aquí


3
En v53 está en la pestaña Representación, en la parte inferior hay una casilla de verificación para Emular medios que habilitará un menú desplegable en el que puede seleccionar Imprimir, similar a la captura de pantalla proporcionada
James Gray

16

Hay una manera fácil de depurar su hoja de estilo de impresión sin cambiar ningún atributo de medios en su código HTML (por supuesto, como se señaló, no resuelve el problema de ancho / páginas):

  • Use la extensión Firefox + Web Developer.
  • En el menú Desarrollador web, elija CSS / Mostrar CSS por tipo de medio / Imprimir
  • Vuelva al menú Desarrollador web, elija Opciones / Funciones persistentes

Ahora está viendo el CSS de impresión y puede volver a cargar su página indefinidamente. Una vez que haya terminado, desmarque "Características persistentes" y vuelva a cargar, obtendrá la pantalla CSS nuevamente.

HTH


77
se vuelve diferente a la vista previa de impresión, sustancialmente. Tal vez esta es una peculiaridad en mi CSS. En cualquier caso, no resuelve el problema. gracias sin embargo.
heartpunk

Sí, completamente diferente para mí también. Seguí este jsfiddle ( jsfiddle.net/2wk6Q/3 ) y la vista previa de impresión muestra páginas con márgenes rojos, pero esto es totalmente diferente.
dualidad_

1
Debo decir que esta "solución" funciona mejor para mí. Tal vez soy afortunado y es por eso que solo hay pequeñas diferencias entre la pantalla de impresión nativa y la pantalla de impresión de los desarrolladores web, pero definitivamente me ayudó a descubrir por qué aparecen las brechas y qué es lo más importante: puedo revisar el código con Firebug y ver qué está pasando en
Erik Čerpnjak

13

La interfaz de usuario de Chrome es diferente nuevamente partir de v53.

No necesito usar esta función con frecuencia, pero cada vez que lo hago, me lleva una eternidad descubrir adónde lo ha movido el equipo de Chrome desde la última vez que grabé ciclos tratando de rastrearlo.

Observe que es el menú ... en el panel Herramientas de desarrollo, no el menú ... en el panel del navegador Chrome.

Vista previa de la impresora a partir de v53 en MacOS

Ahora desplácese hacia abajo en la sección Renderizado. A menudo está debajo del pliegue.


1
Me acabas de salvar días de depuración print.css. ¡Usted es maravilloso!
zazvorniki

8

Siguiendo la respuesta de rflnogueira, la configuración actual de Chrome (40.0. *) Se verá a continuación:

Emulación CSS de impresión cromada


Me llevó un poco de tiempo identificar la pestaña "Medios". Seguí buscándolo en la pestaña "Dispositivo".
Lorin Rivers el

5

Simplemente muestre la hoja de estilo de impresión en su navegador usando la media="screen"depuración. La vista previa de impresión utiliza el mismo motor de renderizado que el modo de navegación normal para que pueda obtener resultados precisos con eso.


14
Excepto que el modo de navegación normal no tiene páginas, así que no tengo idea de cómo fluirá el contenido. El modo de navegación normal tiene un ancho de cierto número de píxeles, mientras que una página tiene un ancho de cierto número de pulgadas o centímetros. Existen diferencias fundamentales independientes de la implementación entre la pantalla y la impresión. La depuración entre ellos es lo que busco.
Jim Puls

1
En Chrome, la representación es bastante diferente utilizando esta sugerencia solo. No funciona
heartpunk

El ancho de la "página" no es difícil de precisar, su altura es realmente difícil. Tanto los navegadores como las impresoras jugarán un papel en el dolor de cabeza de 11 pulgadas. Las páginas web son de longitud continua. Sin una garantía de tipo de dispositivo de salida y navegador, no creo que alguna vez lo golpees en la marca. Usar un enfoque de HTML a PDF funcionaría, pero eso está más allá del alcance de su pregunta.
Dawson

3

2019 - Instrucciones actualizadas

  1. Inspector de Chrome abierto
    • Desde Mac => option+ command+i
    • Desde Windows =>F12
  2. Haga clic en los 3 puntos pequeños, customize and control devTools ingrese la descripción de la imagen aquí

  3. Seleccione More Tools

  4. Seleccione Rendering

  5. Desplácese hacia abajo para Emulate CSS Media

  6. Seleccione printde la flecha hacia abajo

ingrese la descripción de la imagen aquí


0

Si tiene una función de impresión que reescribe el contenido de la página en una nueva ventana con su hoja de estilo de impresión referenciada, obtendrá una mejor idea de cómo se verá en el papel, y podrá depurarlo con los gustos de firebug también.

Aquí hay un ejemplo de cómo se puede hacer esto con JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

2
El problema con este enfoque es que si un usuario simplemente selecciona "Imprimir ..." en su navegador, esta función javascript nunca será invocada.
Ken Liu

no necesita mostrar la función de impresión al usuario, simplemente puede usarla para propósitos de depuración si lo desea
Blowsie

Esta es una solución sobre diseñada para algo que el navegador ya hace. Sólo tiene que utilizar una media="print"y media="screen"respectivamente para sus hojas de estilo y sólo tiene que utilizar el menú de navegación o combinaciones de teclas para la vista preliminar de invocación. (En este caso, no es diferente a abrir una ventana emergente) Y si solo está depurando, aplique el media="screen"atributo a sus estilos de impresión hasta que haya terminado de depurar.
ORyan

-1

ingrese la descripción de la imagen aquí

En DreamWeaver hay una barra de herramientas que muestra prácticamente cualquier opción de representación que desee: pantalla, impresión, medios de mano, pantalla de proyección, medios de televisión, hojas de estilo de tiempo de diseño, etc. Esto es lo que uso especialmente porque: muestra instantáneamente una vista previa con 1 solo presionar un botón.


1
Es bueno saberlo, pero requeriría usar un motor de renderizado diferente al que desarrollamos, y aún requiere más que una recarga. gracias sin embargo.
heartpunk

1
Ya en 2011, este era un software exclusivo de compra solo en plataformas limitadas, que tenía que pagar para obtener la funcionalidad solicitada para depurar la web abierta.
Volker E.

-7

Utilizo macros para enviar pulsaciones de teclas y clics del mouse repetidamente. En Windows, AutoHotKey es un excelente software y en OS X puede leer sobre Automator, una especie de AHK alternativo para OsX .

En Windows (reemplace Ctrl por Cmd en OS X) "Ctrl-s / cambiar a la ventana Fx donde sea que esté en la lista de ventanas abiertas / Ctrl-r" enlazado a 1 tecla no utilizada evita la frustración de tareas poco interesantes y finalmente me salvará los brazos de RSI :)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.