web-dev-qa-db-fra.com

Comment voir le CSS des médias imprimés dans Firebug?

Firebug est un excellent outil pour afficher un CSS de support d'écran pour un élément HTML, mais existe-t-il un moyen de regarder le CSS de support d'impression également? Ou existe-t-il un autre outil pour voir le CSS des médias imprimés?

cssprintingfirebugprint-css
68
Janko Mivšek

Je n'aurais jamais pensé que cela fonctionnerait, mais c'est le cas. Installez -both- la version bêta 1.5 de Firebug et Web Developer. Lorsque vous choisissez le CSS d'impression à partir de Web Developer, les outils de Firebug fonctionnent soudainement sur la nouvelle version imprimée de la page. Jusqu'à présent, je n'ai trouvé aucun problème avec l'exécution des deux en même temps.

31
clintm

Qu'en est-il de la barre d'outils du développeur Web?
https://addons.mozilla.org/en-US/firefox/addon/6
une fois installé, allez dans CSS -> Afficher CSS par type de support -> Imprimer

35
Mads Mobæk

Firefox n'a plus besoin de Firebug maintenant.

  1. Exécutez la barre d'outils du développeur en appuyant sur Shift+F2
  2. Tapez media emulate print

Tapez media reset pour revenir à la vue standard.

32
Alexander Chzhen

Utilisez le plug-in Web Developer. Ensuite, vous pouvez choisir dans le menu CSS le support sur lequel vous souhaitez afficher la page.

4
tvanfosson

Dans Firefox (et certains autres navigateurs), vous pouvez voir un affichage statique de la feuille de style d'impression en utilisant Aperçu avant impression. Elle est loin d'être aussi utile que la barre d'outils du développeur Web, mais elle peut également vous aider à comprendre ce qui va être imprimé.

3
alex

Vous voudrez peut-être jeter un œil à la barre d'outils du développeur Web - elle vous permet de sélectionner le CSS que vous souhaitez voir. En conjonction avec firebug, il devrait être possible de voir le CSS des médias imprimés.

3
tomjen

Edit 2 Après avoir lu Arjan 's réponse , je me rends compte que cette solution ne s'adresse pas correctement sites utilisant (ou abusant) du @media print CSS. (Voir l'exemple ci-dessous.) Mais je pense que cette solution est toujours valable en tant que "truc non parfait-rapide-et-sale", surtout pour le code que vous avez écrit et que vous savez à l'avance qu'il n'a pas cela .

Avec Firebug, vous pouvez également modifier le <link rel="stylesheet" type="text/css" ...> et <style> balises à votre convenance.

Par exemple, vous pouvez changer un original

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

à

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

et le navigateur l'appliquera. Vous devrez également désactiver les écrans uniquement.

Bien sûr, cela n'est utile que si vous souhaitez vérifier rapidement quelques pages avec très peu de liens de feuilles de style, mais au moins, vous n'avez pas besoin d'installer de plugins supplémentaires.

Edit 1 Cette astuce me suggère d'utiliser javascript pour automatiser cela ...

(Avertissement: je vais utiliser JQuery pour plus de simplicité. Je ne suis pas un expert 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");
}

Notez que la valeur par défaut media est "screen" ( w3.org - attribut média ). Cela pourrait être utilisé dans un bouton pour afficher un aperçu de la page. Le seul inconvénient est que vous devez recharger la page pour restaurer la vue d'origine.

Comme indiqué ci-dessus, cette solution ne fonctionne pas avec du code html comme celui-ci, car le style à l'intérieur du @media print ne sera pas appliqué par le navigateur:

<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>
3
Alberto

En fait, sachez que vous pourriez voir @media print CSS quand vous ne vous y attendez pas.

Comme SO utilise :

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

... et donc on pourrait s'attendre à ce que le panneau CSS de Firebug affiche en quelque sorte:

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

Mais à la place, il montre le CSS comme si le @media print est en fait actif, comme:

#sidebar, #nav, [..], div.vote {
 affichage: aucun; 
}

(Voir également le rapport de problème connexe: le panneau CSS n'a pas d'interface utilisateur @media .)

3
Arjan

La barre d'outils du développeur Web présente cependant un gros inconvénient pour le débogage CSS: chaque fois que vous actualisez la page, elle revient à la feuille de style de l'écran.

Ce que j'ai tendance à faire de nos jours, c'est de basculer temporairement le support de la feuille de style d'impression sur l'écran pendant que je développe, puis de le réactiver avant de le mettre en ligne.

2
wheresrhys