Comment déboguer les CSS imprimables?

Question

J'utilise Firebug et la barre d'outils de développement IE tout le temps pour déboguer les problèmes de CSS délicats. Mais occasionnellement, un bug délicat apparaît seulement lorsque vous imprimez la page.

Quelles techniques/outils utilisez-vous pour diagnostiquer des problèmes comme celui-ci? Y a-t-il un moyen d'obtenir plus d'utilité des outils traditionnels de débogage CSS en mode d'impression?

Mis à jour: J'utilise déjà une imprimante PDF pour éviter de gaspiller du papier ; mon problème est que je ne peux pas faire clic droit sur le DOM imprimé. Certains des autres réponses ci-dessous sont assez utiles, merci. :-)

Answer 1

Vient de trouver un commentaire de lee-penkman sur une nouvelle fonctionnalité dans Firefox ici: Appuyez sur Shift-F2 dans Firefox pour ouvrir la console du navigateur (pas la console javascript), puis saisissez media emulate print. Fonctionne très bien!

---

Mise à jour Septembre 2018: À partir de Firefox 62, la console de développement a disparu. Il ne semble pas y avoir de moyen pour activer l'émulation de style d'impression maintenant.

---

Mise à jour Novembre 2019: Il semble qu'avec Firefox 69, il y a à nouveau un nouveau bouton pour l'émulation de style d'impression. Voir l'autre réponse sur cette page: https://stackoverflow.com/a/58015662/195476

Answer 2

J'utilise le plugin WebDeveloper et le CSS --> Afficher le CSS par type de media --> Imprimer pour voir le CSS tel qu'il serait imprimé. Les utilitaires d'inspection de Firebug fonctionnent avec le CSS filtré par le plugin.

Answer 3

J'utilise Firefox et la barre d'outils du développeur.

J'utilise l'outil de modification CSS en temps réel dans la barre des tâches, c'est très pratique pour modifier votre CSS en temps réel et voir les résultats instantanément.

J'utilise également la fonction de contour, qui affiche les div et autres éléments au survol de la souris sur votre site web. Vraiment utile pour repérer les div.

Pour le problème d'impression, allez dans CSS -> Afficher les styles CSS par média -> impression

Il y a beaucoup d'autres outils disponibles dans celui-ci, j'en utilise probablement environ 10%.

Essayez, vous trouverez peut-être quelque chose d'utile.

Answer 4

Que diriez-vous simplement de répertorier votre CSS d'impression en dernier et de supprimer la condition "impression" de votre lien CSS ou de votre déclaration d'importation? Ensuite, vous pouvez déboguer le CSS d'impression dans la fenêtre du navigateur.

Answer 5

J'utilise l'imprimante virtuelle Adobe PDF, car c'est ce qu'il y a de plus proche d'une véritable imprimante, sans gaspiller d'encre et de papier.

Quoi qu'il en soit, il est recommandé d'avoir une feuille de style CSS séparée pour les impressions, avec des graphiques beaucoup plus simples et moins d'images que celles que vous utilisez uniquement à des fins de design.