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

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?

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

   

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 *

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/

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

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

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

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.

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

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

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.

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

3. Seleccione More Tools

4. Seleccione Rendering

5. Desplácese hacia abajo para Emulate CSS Media

6. Seleccione printde la flecha hacia abajo

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();
        });

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.

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