web-dev-qa-db-fra.com

Suggestions pour le débogage des feuilles de style d'impression?

J'ai récemment travaillé sur une feuille de style d'impression pour un site Web et je me suis rendu compte que j'étais à court de moyens efficaces pour le modifier. C'est une chose d'avoir un cycle de rechargement pour travailler sur la disposition à l'écran:

  • changer de code
  • onglet de commande
  • recharger

mais tout ce processus devient beaucoup plus ardu lorsque vous essayez d'imprimer:

  • changer de code
  • onglet de commande
  • recharger
  • impression
  • plisser les yeux à l'aperçu avant impression
  • ouvrir PDF dans Aperçu pour inspection ultérieure

Y a-t-il des outils que je manque ici? L'inspecteur de WebKit a-t-il une case à cocher "prétend que c'est un support paginé"? Y a-t-il de la magie que Firebug (frisson) peut faire?

cssprintingfirebuggoogle-chrome-devtoolsweb-inspector
237
Jim Puls

Il existe une option pour cela dans l'inspecteur de Chrome.

  1. Ouvrez l'inspecteur DevTools (mac: Cmd + Shift + C , les fenêtres: Ctrl + Shift + C)
  2. Cliquez sur l'icône Basculer en mode appareil . Toggle device mode button, situé dans le coin supérieur gauche du panneau DevTools. (les fenêtres: Ctrl+Shift+M, Mac: Cmd+Shift+M).
  3. Cliquez sur le autres remplacements  more overrides icône dans le coin supérieur droit de la fenêtre du navigateur pour ouvrir le tiroir devtools.

  4. Sélectionnez ensuite média dans le tiroir d'émulation, puis cochez la case média CSS .

    enter image description here

Cela devrait faire l'affaire.

Mise à jour: les menus ont été modifiés dans DevTools. Vous pouvez le trouver en cliquant sur le menu "Trois points" dans le coin supérieur droit> Plus d'outils > Paramètres de rendu> Émuler un support> Imprimer.

Source: page Google DevTools *

325
Rafael Nogueira

Je suppose que vous souhaitez contrôler au maximum la fenêtre imprimée sans utiliser de HTML pour l'approche PDF ... Utilisez l'écran @media pour déboguer - @media print for final css

Les navigateurs modernes peuvent vous donner un aperçu rapide de ce qui va se passer au moment de l’impression en utilisant pouces et pts dans 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 */
 ...
}

Une fois que votre navigateur affiche "pouces", vous aurez une meilleure idée de ce à quoi vous attendre. Cette approche devrait tout sauf mettre fin à la méthode d'aperçu avant impression. Toutes les imprimantes fonctionneront avec les unités pt et in, et l'utilisation de la technique @media vous permettra de voir rapidement ce qui se passera et d'ajuster en conséquence. Firebug (ou équivalent) va absolument accélérer ce processus. Lorsque vous avez ajouté vos modifications à @media, vous disposez de tout le code nécessaire pour un fichier CSS lié à l'aide de l'attribut media = "print" - il vous suffit de copier/coller les règles d'écran @media dans le fichier référencé.

Bonne chance. Le Web n'a pas été construit pour l'impression. Créer une solution qui offre tout votre contenu, des styles équivalents à ceux du navigateur peut parfois s'avérer impossible. Par exemple, une mise en page fluide pour un public majoritairement de 1280 x 1024 ne se traduit pas toujours facilement par une impression laser agréable et soignée de 8,5 x 11.

Référence W3C pour purusal: http://www.w3.org/TR/css3-mediaqueries/

72
Dawson

Chrome 48 vous pouvez déboguer les styles d'impression dans l'onglet Rend.

Cliquez sur l'icône de menu en haut à droite de l'inspecteur et Paramètres de rend.

Modifier
Pour Chrome 58 l'emplacement a été remplacé par Inspecteur Web> Menu> Autres outils> Rend

20
minlare

Dans Chrome v41, c'est là, mais à un endroit légèrement différent.

enter image description here

19
johntrepreneur

Il existe un moyen simple de déboguer votre feuille de style d'impression sans changer d'attribut de support dans votre code HTML (bien sûr, comme indiqué, cela ne résout pas le problème de la largeur/pages):

  • Utilisez l'extension Firefox + Web Developer.
  • Dans le menu Web Developer, choisissez CSS/Display CSS by Media Type/Print.
  • Retournez au menu Web Developer, choisissez Options/Persist Features

Vous visualisez maintenant le CSS d'impression et vous pouvez recharger votre page indéfiniment. Une fois que vous avez terminé, décochez "Persist Features" et rechargez, vous obtiendrez à nouveau le CSS de l'écran.

HTH.

16
Capsule

L'interface utilisateur de Chrome est à nouveau différente à partir de v53.

Je n'ai pas besoin d'utiliser cette fonctionnalité souvent, mais chaque fois que je le fais, il me faut une éternité pour déterminer où l'équipe Chrome l'a déplacée depuis la dernière fois que j'ai gravé des cycles en essayant de la retrouver.

Notez que c’est le menu ... dans le panneau Outils de développement et non le menu ... dans Chrome volet du navigateur.

Printer preview as of v53 on MacOS

Maintenant faites défiler vers le bas dans la section Rendu. C'est souvent en dessous du pli.

12
TrophyGeek

Après la réponse de rflnogueira, les paramètres actuels de Chrome (40.0. *) Seront les suivants:

chrome print css emulation

8
Anil Vangari

Affichez simplement la feuille de style d'impression dans votre navigateur à l'aide de media="screen" lors du débogage. La vue d'aperçu avant impression utilise le même moteur de rendu que le mode de navigation normal, ce qui vous permet d'obtenir des résultats précis avec cette information.

5
Tatu Ulmanen

2019 - Instructions mises à jour

  1. Ouvrez Chrome inspecteur
    • De Mac => option + command + i
    • Depuis Windows => F12

  2. Cliquez sur les 3 petits points, customize and control devToolsenter image description here

  3. Sélectionnez More Tools

  4. Sélectionnez Rendering

  5. Faites défiler vers le bas jusqu'à Emulate CSS Media

  6. Sélectionnez print à partir de la flèche vers le bas

enter image description here

1
jso1919

Si vous avez une fonction d'impression qui réécrit le contenu de la page dans une nouvelle fenêtre avec votre feuille de style d'impression référencée, vous aurez une bien meilleure idée de son apparence sur papier et vous pourrez le déboguer. avec les goûts de firebug aussi.

Voici un exemple de la façon dont cela peut être fait avec 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 rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
0
Blowsie