Sugerencias para la depuración de impresión de las hojas de estilo?

Recientemente he estado trabajando en una hoja de estilo de impresión para un sitio web, y me di cuenta de que yo estaba en una pérdida para las formas efectivas para ajustarlo. Una cosa es tener un ciclo de recarga para trabajar en el diseño de la pantalla:

  • cambiar el código
  • comando-tabulador
  • recargar

pero que todo el proceso se vuelve mucho más difícil cuando usted está tratando de impresión:

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

Hay herramientas que estoy perdiendo aquí? ¿WebKit inspector de tener un «pretender que se trata de bloque paginado de los medios de comunicación» casilla de verificación? Hay cierta magia que Firebug (el estremecimiento) se puede hacer?

  • ¿Qué hay de la «vista previa de Impresión» de la función de un navegador que sea compatible con él (por ejemplo, Firefox)? He (en su mayoría con precisión) depurando algunas páginas web para imprimir con ella.
  • posibles duplicados de ¿Cómo depurar imprimible CSS?
  • En Firefox, abrir el «Desarrollador de la Barra de herramientas» con las teclas Shift+F2, tipo «los medios de comunicación emular impresión» (o «uem» + Ficha + «imprimir»), Entrar.
  • relacionados: stackoverflow.com/questions/9540990/… , stackoverflow.com/questions/726825/…
  • Esta debe ser una respuesta. stackoverflow.com/a/28873496/1696030 tengo bastantes votos positivos para la comparación. «Developer Toolbar» es un poco engañoso, ya que es una interfaz de línea de comandos.
  • bien @MarcelloNuccio que la respuesta fue útil para mí porque yo estaba buscando una respuesta en Firefox (!) pero la pregunta original era de Webkit/Chrome por lo que no cumple con los requisitos aquí…

InformationsquelleAutor Jim Puls | 2010-03-16

12 Kommentare

  1. 325

    Hay una opción para que en Chrome inspector.

    1. Abrir la DevTools inspector (mac: Cmd + Cambio + C , windows: Ctrl + Cambio + C)
    2. Haga clic en el Alternar modo de dispositivo de icono Sugerencias para la depuración de impresión de las hojas de estilo?, situado en la esquina superior izquierda de la DevTools panel. (windows: Ctrl+Cambio+M, mac: Cmd+Cambio+M).
    3. Haga clic en el Más invalida Sugerencias para la depuración de impresión de las hojas de estilo? icono en la esquina superior derecha de la ventana del navegador para abrir la devtools cajón.
    4. A continuación, seleccione Medios de comunicación en la emulación de cajón, y comprobar la de medios CSS casilla de verificación.

      Sugerencias para la depuración de impresión de las hojas de estilo?

    Esto debe hacer el truco.

    Actualización: Los menús han cambiado en DevTools.
    Ahora se puede encontrar haciendo clic en los «tres puntos» en el menú en la esquina superior derecha > Herramientas > opciones de Renderizado > Emular a los medios de comunicación > imprimir.

    Fuente: Google DevTools página*

    • Gracias, eso es lo que estaba buscando, no podía encontrarlo :/ El acceso directo no funciona más, aunque. Acabo de hacer F12 + icono de engranaje en la esquina inferior derecha, entonces el ajuste es bajo la ficha Reemplazos,
    • Merci Aurelien para señalar la escurrir los accesos directos. Sólo corregido
    • Gracias! El emule css es muy práctico.
    • por desgracia, no es 100% exacta 🙁
    • La única manera de conseguir un 100% de precisión es imprimir…
    • Me gustaría poder subir este post dos veces. Puede que no sea 100% exacta, pero es lo suficientemente preciso para resolver un montón de extraños y molestos problemas.
    • En Chrome 32.0.1700.14 beta-m Aura, «Emular los medios de comunicación CSS [imprimir]» falta 🙁
    • Está usted seguro de que no es necesario para seleccionar «Pantalla» en lugar de «Dispositivo»?
    • Esto es muy cuidada. ¿Hay algún modo de conseguir que se muestre, donde los saltos de página son?
    • El inspector debe saber que el tamaño de la página que va a imprimir, el tamaño de la impresión de la zona es, los márgenes, etc.
    • así? 🙂 Cuando «Emular pantalla», que te permite ajustar la resolución, por lo que es factible podría permiten establecer el tamaño de papel para la simulación de la impresión. O se puede usar la actual configuración de impresión; un inspector para la vista previa de impresión sería de gran valor!
    • Usted podría intentar lo que sugiere que el equipo de Chrome: chromium.org/getting-involved/bug-triage
    • Esto no muestra que para mí en Chrome menos que puedo editar el menú de opciones de «anular» para mostrar esta ficha. En la más reciente de Chrome, pero en un Mac, por lo que podría estar relacionado con la
    • 37.0.2062.124 es bajo Emulación -> Medios de comunicación
    • Como de Chrome 38, la emulación se enciende con el ‘modo de dispositivo» en las Herramientas de Desarrollador (teléfono celular icono). Modificar configuración de emulación en el ‘cajón’ en el interior de Herramientas de Desarrollador (símbolo icono, se parece a ⟩≡).
    • Gracias por el tip @duozmo, que se actualiza.
    • Tenga en cuenta que esto sólo funciona para imprimir, no, por ejemplo, para (de impresión y la orientación). Sólo para señalar que
    • Esta respuesta debe ser corregido. Como de Chrome 48, la hoja de estilo de impresión emulador no está bajo la «Emulación», pero en «la entrega».
    • Los pasos 2 y 3 son simplemente malo para el actual de Chrome (y el Chrome como de su más reciente edición). Esto ha nada a ver con el modo de dispositivo. Acaba de abrir dev herramientas, abra el panel (tecla Esc o seleccione «mostrar la consola» desde el menú), y marcar la casilla «Emular los medios impresos». Eso es todo.
    • Este es ahora oculto bajo el de tres puntos en el menú de la consola de la sección de herramientas dev.
    • Tres puntos de menú (a la derecha) en el inspector > Herramientas > opciones de Renderizado > Emular a los medios de comunicación > imprimir
    • He añadido esto a la respuesta de arriba para que sea más fácil para la gente a encontrar.
    • Effing fantástico, gracias.
    • Es importante tener en cuenta que esto no eliminará imágenes y colores de fondo, que la impresión va a hacer.

  2. 72

    Estoy asumiendo que usted desea mayor control de los impresos de la ventana como sea posible, sin el uso de un HTML a PDF, enfoque… el Uso de @media screen para depurar – @media print para la final de css

    Navegadores modernos puede dar una rápida visual de lo que va a suceder en el momento de imprimir el uso de pulgadas y pts en un @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 está mostrando en «pulgadas» usted tendrá una mejor idea de qué esperar. Este enfoque debe todo pero al final la vista previa de impresión método. Todas las impresoras funcionan con pt y in unidades, y el uso de la @media técnica le permitirá ver rápidamente lo que va a suceder y ajustar en consecuencia. Firebug (o equivalente) absolutamente acelerar ese proceso. Cuando hayas añadido sus cambios a @los medios de comunicación, que tiene todo el código necesario para un archivo CSS vinculado el uso de media = "print" atributo – sólo tienes que copiar/pegar el @media screen reglas para el archivo de referencia.

    Buena suerte. La web no fue construida para la impresión. La creación de una solución que ofrece la totalidad de su contenido, estilos de igual a lo que se ve en el navegador puede ser imposible a veces. Por ejemplo, un fluido diseño de una predominantemente 1280 x 1024 audiencia no siempre fácil de traducir a un bonito y limpio 8.5 x 11 de impresión láser.

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

    • Sólo quería comentar que este método es muy inteligente. Mucho más fácil de cambiar el tamaño de la ventana ligeramente con el «botón» estilos de impresión que para usar una función vista previa de impresión. Mientras que usted todavía tiene que hacer que a veces para IE compatibilidad y tal, esto es ideal para la primera iteración de estilos de impresión.
    • Gracias Hombre. Hey, me di cuenta de mi demo off-line, así que he creado un violín para él. jsfiddle.net/dNEmT
  3. 20

    Chrome 48 puede depurar estilos de impresión dentro de la Representación ficha.

    Haga clic en el icono de menú en la parte superior derecha del inspector y los Ajustes de procesamiento de.

    Editar

    Para Chrome 58 la ubicación ha cambiado a Inspector Web > Menú > Herramientas > Representación

    • Chrome 49 : F12 (en la consola para desarrolladores) -> ESC (consola) -> Representación> Emular a los medios impresos
  4. 19

    En Chrome v41, que está ahí, pero de una manera ligeramente diferente lugar.

    Sugerencias para la depuración de impresión de las hojas de estilo?

    • Gracias por los consejos, he actualizado mi respuesta!
    • En v53 es en la Representación de la ficha en su lugar, en la parte inferior hay una casilla de verificación para Emular a los Medios de comunicación que permitirá un desplegable en el que puede seleccionar Imprimir en, similar a la captura de pantalla
  5. 16

    Hay una manera fácil de depurar su hoja de estilo de impresión sin tener que cambiar cualquier atributo media en el código HTML (por supuesto, como se ha señalado, no resuelve el ancho /páginas de la revista):

    • Uso Firefox + Web Developer extension.
    • En la Web del Desarrollador de menú, elija CSS /Display de CSS por Tipo de Medios de Impresión /
    • Volver a Web Developer menú, seleccione Opciones /Persisten Características

    Ahora está viendo la impresión de CSS y puede volver a cargar la página de forma indefinida.
    Una vez que hayas terminado, desmarque la opción «Persisten Características» y volver a cargar, obtendrá la pantalla CSS de nuevo.

    HTH.

    • hace diferente de la vista previa de impresión, de manera sustancial. tal vez esto es un capricho en mi css. en cualquier caso, no resuelve el problema. gracias, aunque.
    • Sí, completamente diferente para mí también. He seguido este jsfiddle (jsfiddle.net/2wk6Q/3) y vista previa de impresión muestra las páginas rojas de los márgenes, pero esto es totalmente diferente.
    • Debo decir que esta «solución» que funciona mejor para mí. Tal vez tengo suerte y es por eso que sólo hay pequeñas diferencias entre los nativos de pantalla de impresión y la web de desarrolladores de impresión de la pantalla, pero sin duda me ayudó a encontrar la razón de por qué las diferencias aparecen y lo que es más importante – puedo ir por el código con firebug y ver lo que está pasando
  6. 12

    Chrome interfaz de usuario es diferente de nuevo como de v53.

    No necesito para utilizar esta función a menudo, pero cuando lo hago, me lleva siempre a averiguar dónde está el Chrome equipo se ha movido desde la última vez que me quemé los ciclos tratando de localizarlo.

    Aviso es el … menú en Dev Tools panel no el … menú en el Navegador Chrome panel.

    Sugerencias para la depuración de impresión de las hojas de estilo?

    Ahora desplácese hacia abajo en la Representación de la sección. Es a menudo debajo de la tapa.

    • Usted sólo me salvó días de imprimir.css depuración. Usted está impresionante!
  7. 8

    Seguimiento a la respuesta por rflnogueira, la actual configuración de Chrome (40.0.*) tendrá un aspecto como el siguiente:

    Sugerencias para la depuración de impresión de las hojas de estilo?

    • Me tomó un poco de tiempo para identificar la pestaña «Medios». Seguí buscando en la ficha «Dispositivo».
  8. 5

    Simplemente mostrar la hoja de estilo de impresión de su navegador el uso de media="screen" durante la depuración. La vista preliminar de impresión utiliza el mismo motor de renderizado como modo de navegación normal, así que usted puede obtener resultados precisos usando eso.

    • Excepto en el modo de navegación normal, no tiene páginas, así que no tengo idea de cómo el contenido fluya. Modo de navegación Normal, tiene un ancho de un cierto número de píxeles, mientras que una página tiene un ancho de un cierto número de pulgadas o centímetros. Hay fundamentales de la aplicación independiente de las diferencias entre la pantalla y la impresión. La depuración de entre esos es lo que yo busco.
    • En chrome la representación es muy diferente el uso de esta sugerencia solo. No, no funcionará.
    • «Página» de ancho no es difícil de concretar, es la altura que es realmente difícil. Ambos navegadores, y las impresoras jugará un papel importante en la 11in dolor de cabeza. Las páginas Web son la longitud continua. Sin una garantía de salida tipo de dispositivo y navegador, no creo que nunca voy a golpear en el blanco cada vez. El uso de un HTML a PDF enfoque de trabajo, pero que está más allá del alcance de su pregunta.
  9. 1

    2019 – Actualizado instrucciones

    1. Abrir el inspector de Chrome
      • De Mac => option + command + i
      • De Windows => F12
    2. Haga clic en la pequeña de 3 puntos, customize and control devTools Sugerencias para la depuración de impresión de las hojas de estilo?

    3. Seleccione More Tools

    4. Seleccione Rendering

    5. Desplácese hasta la parte inferior para Emulate CSS Media

    6. Seleccione print de la flecha hacia abajo

    Sugerencias para la depuración de impresión de las hojas de estilo?

  10. 0

    Si usted tiene una función de impresión que reescribe el contenido de la página a una nueva ventana con el estilo de impresión de la hoja de referencia se obtendrá una mejor idea de lo que se va a ver en el papel , y usted será capaz de depurar con los gustos de firebug también.

    Heres un ejemplo de cómo esto se puede hacer 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  href="css/style.css" />');
                a.document.write('<link  href="css/print.css" />');
                a.document.write("</head><body>");
                a.document.write($('#Content').html());
                a.document.write('</body></html>');
                a.document.close();
                a.print();
            });
    • El problema con este enfoque es que si un usuario simplemente selecciona «Imprimir…» en su navegador, esta función de javascript nunca se invoca.
    • no es necesario mostrar la función de impresión para el usuario, simplemente se puede utilizar para propósitos de depuración si usted desea
    • Esta es una solución de ingeniería a algo que el navegador ya lo hace. Sólo tiene que utilizar un media="print" y media="screen" respectivamente para tus hojas de estilo y sólo tiene que utilizar el menú del navegador o combinaciones de teclas para invocar la vista previa de impresión. (En este caso no es diferente de la apertura de una ventana emergente (popup) Y si se acaba la depuración, aplicar la media="screen" atributo a sus estilos de impresión hasta que se realiza la depuración.
  11. -1

    Sugerencias para la depuración de impresión de las hojas de estilo?

    En DreamWeaver hay una barra de herramientas que muestra prácticamente cualquier representación opción que desee:
    la pantalla, de impresión, de mano de los medios, pantalla de proyección, tv, medios de comunicación, desitn tiempo las hojas de estilo, etc.
    Esto es lo que yo uso, sobre todo porque: al instante muestra una vista previa con 1 sola pulsación de un botón.

    • es bueno saberlo, pero requeriría el uso de una representación diferente del motor que lo desarrollamos, y que todavía requiere de una recarga. gracias, aunque.
    • Ya en 2011 esta era privativo, de la compra de software sólo limitada de plataformas, lo que usted necesita para pagar para obtener la funcionalidad deseada para depurar la web abierta.
  12. -7

    Puedo usar macros para enviar pulsación de teclas y clics del ratón repetidamente.
    Bajo Windows, AutoHotKey es un gran software, y en OS X puede leer acerca de Automator tipo de una alternativa AHK para OsX.

    Bajo Windows (reemplazar Ctrl por Cmd en mac OS X) «Ctrl-s /interruptor de Fx de la ventana donde se encuentra en la lista de ventanas abiertas /Ctrl-r», vinculados a 1 no utilizada clave evita la frustración de no interesante tareas y, en definitiva, salvar mis brazos de RSI 🙂

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea