quantum - ¿Cómo ver los medios impresos CSS en Firebug?

firebug lite

Question

Firebug es una herramienta excelente para mostrar un CSS de medios de pantalla para algún elemento HTML, pero ¿hay alguna manera de ver el CSS de medios impresos también? ¿O hay alguna otra herramienta para ver los medios impresos CSS?

Answer 1

¿Qué hay de la barra de herramientas del desarrollador web?
https://addons.mozilla.org/en-US/firefox/addon/60
cuando esté instalado, vaya a CSS -> Mostrar CSS por tipo de medio -> Imprimir

Answer 2

En Firefox (y algunos otros navegadores), puede ver una visualización estática de la hoja de estilo de impresión mediante la Vista previa de impresión. No es tan útil como la barra de herramientas para desarrolladores web, pero también puede ayudarlo a comprender qué se va a imprimir.

Answer 3

En realidad, tenga en cuenta que puede ver @media print CSS cuando no lo espera.

Al igual que SO usa :

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

... y por lo tanto uno podría esperar que el panel CSS en Firebug muestre de alguna manera:

@media print { #sidebar, #nav, [..], div.vote { display: none; } }

Pero en su lugar, muestra el CSS como si la @media print estuviera realmente activa, como:

#sidebar, #nav, [..], div.vote { display: none; }

(Consulte también el informe de problema relacionado: CSS Panel no tiene @media UI ).

Answer 4

Es posible que desee echar un vistazo a la barra de herramientas webdeveloper: le permite seleccionar qué CSS desea ver. Junto con Firebug, debería ser posible ver el CSS de medios impresos.

Answer 5

Firefox no necesita Firebug ahora.

1. Ejecute la barra de herramientas del desarrollador presionando Shift+F2
2. Tipo de media emulate print

Escriba media reset para volver a la vista estándar.

Answer 6

Nunca hubiera esperado que esto funcionara, pero lo hace. Instale -ambos- la versión 1.5 beta de Firebug y el desarrollador web. Cuando elige imprimir css desde Web Developer, las herramientas en Firebug de repente funcionan en la nueva versión impresa de la página. Hasta ahora no he encontrado ningún problema con ejecutar ambos al mismo tiempo.

Answer 7

Sin embargo, la barra de herramientas de desarrollador web tiene un gran inconveniente para la depuración de CSS: cada vez que actualiza la página, vuelve a la hoja de estilos de pantalla.

Lo que tiendo a hacer en estos días es cambiar temporalmente los medios de la hoja de estilo de impresión a la pantalla mientras desarrollo, y luego volver a conectarla antes de lanzarla.

Answer 8

Utilice el complemento de desarrollador web. A continuación, puede elegir en el menú de CSS qué medio desea que muestre la página.

Answer 9

Editar 2 Después de leer la answer , me doy cuenta de que esta solución no aborda correctamente los sitios que usan (o abusan) del @media print CSS. (Vea el ejemplo a continuación.) Pero creo que esta solución aún es válida como un "truco no perfecto, rápido y sucio", sobre todo para el código que ha escrito y que sabe de antemano que no tiene este .

Con Firebug, también puede editar las etiquetas <link rel="stylesheet" type="text/css" ...> y <style> para su conveniencia.

Por ejemplo, puedes cambiar un original

<link rel="stylesheet" type="text/css" media="print">

a

<link rel="stylesheet" type="text/css" media="screen">

y el navegador lo aplicará. También deberá desactivar los que solo tienen pantalla.

Por supuesto, esto solo es útil si solo quiere comprobar rápidamente algunas páginas con muy pocos enlaces de hojas de estilo, pero al menos no necesita instalar ningún complemento adicional.

Editar 1 Este truco sugiere que use javascript para automatizar esto ...

(Descargo de responsabilidad: usaré JQuery por simplicidad. No soy un experto en Javascript).

// Save all stylesheet links
allStylesheets = $(''link[rel="stylesheet"], style'');
// Save the print-stylesheet links
printStylesheets = $(''link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]'');
// Set all stylesheet medias to something ''exotic''
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to ''screen''
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}

Tenga en cuenta que el media predeterminado es "screen" ( w3.org - atributo de medios ). Esto podría usarse en un botón para mostrar una vista previa de la página. El único inconveniente es que debe volver a cargar la página para restaurar la vista original.

Como se señaló anteriormente, esta solución no funciona con código html como este, porque el estilo dentro de la @media print no será aplicado por el navegador:

<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
@media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>