2009-04-07 9 views
57

Utilizo Firebug e IE Developer Toolbar todo el tiempo para depurar problemas de CSS. Pero de vez en cuando, aparece un error complejo que solo aparece cuando vas a imprimir la página.¿Cómo se depura CSS imprimible?

¿Qué técnicas/herramientas usas para diagnosticar problemas como este? ¿Hay alguna forma de aprovechar mejor las herramientas tradicionales de depuración de CSS en la vista de impresión?

Actualizado: Ya uso una impresora PDF para evitar desperdiciar papel; mi problema es que no puedo hacer clic derecho en el DOM impreso. Algunas de las otras respuestas a continuación son bastante útiles, gracias. :-)

+2

Mejor respuesta aquí: http://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets –

+0

relacionado: https://stackoverflow.com/questions/2452713/suggestions-for-debugging- print-stylesheets, https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ – vaxquis

Respuesta

67

acaba de encontrar un comentario de lee-penkman sobre una nueva característica en Firefox here: Prensa Shift-F2 en Firefox para abrir la consola, a continuación, introduzca media emulate print. Funciona absolutamente genial!

+6

Esto funcionó muy bien para mí una vez que presté atención a lo que en realidad dijiste que hicieras en lugar de asumir que lo sabía. Esto no está en la consola en las herramientas F12, es la barra de herramientas del desarrollador. Exactamente lo que estaba buscando. –

+0

¡un gran consejo! realmente útil – banditpanda

+0

Gracias, me encanta FF y esta herramienta funciona para mí. –

1

Utilizo la impresora virtual Adobe PDF, porque es lo más parecido a una impresora real que podría obtener, sin desperdiciar tinta y papel.

De todos modos, se recomienda tener un CSS por separado para las impresiones, con gráficos mucho más simples y menos de las imágenes que utiliza solo con fines de diseño.

+0

Sí, es el CSS por separado que estoy intentando depurar. (La impresora PDF es un buen consejo, la uso mucho). –

23

Uso el complemento WebDeveloper y CSS -> Mostrar CSS por tipo de medio -> Imprimir para ver el CSS como lo haría cuando se imprimiera. Las utilidades de inspección de Firebug funcionan con el CSS filtrado por el complemento.

+20

Lamentablemente, esa vista no se parece ni remotamente a lo que Firefox realmente imprime (parece que también usa estilos de solo pantalla cuando imprime). No encontré ninguna opción mejor que el uso frecuente de la opción de vista previa de impresión mientras edito estilos en Firebug. – Tgr

+1

De hecho, creo que es porque no hay noción de páginas ... pero al menos, puedes echarle un vistazo sin tener que obtener una vista previa. – gamov

+3

Parece que solo usa estilos de impresión. Un buen truco es no solo establecer sus tipos de medios específicos, sino también establecer todas las demás hojas de estilo en media = "all, print". Funciona para mí :-) – Jeroen

0

Imprima en Microsoft XPS Document Writer si no desea pagar dinero. O use SnagIt si tiene los fondos (prueba gratuita en el sitio).

6

Uso Firefox y el developer toolbar.

Uso la herramienta de edición de CSS en tiempo real en la barra de tareas, es muy útil modificar su CSS sobre la marcha para ver los resultados en tiempo real.

También utilizo la función de contorno, que el div y cosas así sobre el mouse sobre su sitio web. Realmente útil para encontrar div.

Para el problema de impresión, vaya a CSS - estilo CSS> Pantalla por los medios de comunicación -> impresión

Hay un montón de otras herramientas disponibles en éste, probablemente utilizo alrededor del 10% de la misma.

Intente tal vez encuentre algo útil.

3

¿Qué tal si acaba de publicar su CSS de impresión por última vez, y elimina la condición de "impresión" de su enlace de CSS o declaración de importación? Luego está depurando el CSS impreso en la ventana del navegador.

+3

solo tengo que asegurarme de configurar '#body {width: 8.5in; height: 11in;} ' – ZMorek

+0

¡Idea brillante! Esto fue extremadamente efectivo para mí – veeTrain

+0

No funcionó para mí en Firefox v22. Se veía muy diferente a la impresión real. – reflexiv

1

Siempre utilicé la barra de herramientas del desarrollador web (como se describe en las otras respuestas), pero Firebug parece omitir algunos estilos de vez en cuando. Así que agregué un Marcador a mi navegador y agregué el siguiente Javascript como URL del marcador. Ahora simplemente me puedo cambiar a imprimir el estilo haciendo clic en el marcador:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})() 

El código anterior encuentra todos los enlaces de hojas de estilo, las pruebas si se trata de medios de comunicación = impresión y si es así lo cambia a los medios de comunicación = all (y oculta todos los medios = pantalla reemplazándola por media = dontshow) y vuelve a cargar las hojas de estilo agregando un token de tiempo a la URL. La secuencia de comandos de recarga básica es de otra persona, agregué parte de medios. ¡Esto funciona muy bien para mí!

Ésta sería la versión más fácil de la dirección URL JavaScript anteriormente para explicación:

javascript: (function() { 
    var h, a, f; 
    a = document.getElementsByTagName('link'); 
    for (h = 0; h < a.length; h) { 
     f = a[h]; 
     if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) { 
      var g = f.href.replace(/(&|\?)forceReload=\d /, ''); 
      if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow"; 
      if (f.media.toLowerCase().match(/print/)) f.media = "all"; 
      f.href = g(g.match(/\?/) ? '&' : '?') 
      'forceReload=' (new Date().valueOf()); 
     } 
    } 
})() 
+1

Gracias por ahorrarme mucho tiempo y dolor de cabeza. –

4

En las herramientas para desarrolladores de Chrome (F12 \ Ctrl (Cmd en Mac) + Shift + C): En la pestaña de emulación (Desde Chrome 32 en adelante, mi humilde opinión), hay una pestaña para 'Medios'.

Allí se puede marcar la casilla de emulación de medios y seleccione los medios de comunicación que le gustaría emular ('imprimir', 'pantalla', etc.)

18

En Chrome 51:

Chrome developer tools

abierto devtools (CTRL + F12 o CTRL + SHIFT + I) y haga clic en el menú ..., haga clic en More Tools > Rendering settings para abrir la pestaña Rendering de la consola del desarrollador (o si la consola está abierta solo navegue hasta esta pestaña).

En esa pestaña, seleccione y marque la casilla para Emulate Media: print.

+0

Cuidado: esto no emulará cosas como ocultar imágenes/colores de fondo (lo que hace la respuesta de Firefox). –

Cuestiones relacionadas