Des suggestions pour déboguer les 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 le code
• onglet de commande
• recharger

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

• changer le code
• onglet de commande
• recharger
• impression
• plisser les yeux sur l'aperçu avant impression
• ouvrir le PDF dans l'aperçu pour une inspection plus approfondie

Y a-t-il des outils qui me manquent ici? L'inspecteur de WebKit a-t-il une case à cocher «faire semblant qu'il s'agit d'un média paginé»? Y a-t-il de la magie que Firebug ( frisson ) peut faire?

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

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

4. Ensuite, sélectionnez Média dans le tiroir d'émulation et cochez la case Média CSS .

   

Cela devrait faire l'affaire.

Mise à jour: les menus ont changé dans DevTools. Il peut maintenant être trouvé en cliquant sur le menu "trois points" dans le coin supérieur droit> Plus d'outils> Paramètres de rendu> Émuler le support> imprimer.

Source: page Google DevTools *

Je suppose que vous souhaitez contrôler autant que possible la fenêtre imprimée sans utiliser une approche HTML vers PDF ... Utilisez l'écran @media pour déboguer - @media print pour le css final

Les navigateurs modernes peuvent vous donner un aperçu rapide de ce qui va se passer au moment de l'impression en utilisant les pouces et les points 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 pratiquement mettre fin à la méthode d'aperçu avant impression. Toutes les imprimantes fonctionneront avec les unités ptet in, et l'utilisation de la technique @media vous permettra de voir rapidement ce qui va se passer et de les ajuster en conséquence. Firebug (ou équivalent) accélérera absolument ce processus. Lorsque vous avez ajouté vos modifications à @media, vous avez tout le code dont vous avez besoin pour un fichier CSS lié en utilisant l' media = "print"attribut - il suffit de copier / coller les règles d'écran @media dans le fichier référencé.

Bonne chance. Le Web n'a pas été conçu pour être imprimé. Créer une solution qui fournit tout votre contenu, des styles égaux à ce qui est vu dans le navigateur peut parfois être impossible. Par exemple, une mise en page fluide pour un public majoritairement 1280 x 1024 ne se traduit pas toujours facilement en 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/

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

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

Modifier
pour Chrome 58 l'emplacement a changé pour Inspecteur Web> Menu> Plus d'outils> Rendu

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

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

• Utilisez l'extension Firefox + Web Developer.
• Dans le menu Développeur Web, choisissez CSS / Afficher CSS par type de support / Imprimer
• Revenez au menu Web Developer, choisissez Options / Persist Features

Vous visualisez maintenant le CSS imprimé et vous pouvez recharger votre page indéfiniment. Une fois que vous avez terminé, décochez «Persister les fonctionnalités» et rechargez, vous obtiendrez à nouveau le CSS de l'écran.

HTH.

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

Je n'ai pas besoin d'utiliser cette fonctionnalité souvent, mais chaque fois que je le fais, il me faut une éternité pour savoir 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 ... du volet Outils de développement et non le menu ... du volet du navigateur Chrome.

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

Suite à la réponse de rflnogueira, les paramètres actuels de Chrome (40.0. *) Ressembleront à ci-dessous:

Affichez simplement la feuille de style d'impression dans votre navigateur en utilisant media="screen"pendant le débogage. La vue d'aperçu avant impression utilise le même moteur de rendu que le mode de navigation normal afin que vous puissiez obtenir des résultats précis en utilisant cela.

2019 - Instructions mises à jour

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

2. Cliquez sur les 3 petits points, customize and control devTools

3. Sélectionner More Tools

4. Sélectionner Rendering

5. Faites défiler vers le bas pour Emulate CSS Media

6. Sélectionnez printdans la flèche vers le bas

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 ce à quoi elle ressemblera sur le papier, et vous pourrez la 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();
        });

En DreamWeaver il y a une barre d' outils qui montre pratiquement toutes les options de rendu que vous voulez: l' écran, l' impression, les médias de poche, écran de projection, supports de télévision, des feuilles de style de temps desitn, etc. C'est ce que je l' utilise surtout parce qu'il: montre instantanément un aperçu avec 1 simple pression sur un bouton.

J'utilise des macros pour envoyer des pressions de touches et des clics de souris à plusieurs reprises. Sous Windows, AutoHotKey est un excellent logiciel et sous OS X, vous pouvez lire sur le type Automator d' une alternative AHK pour OsX .

Sous Windows (remplacer Ctrl par Cmd sous OS X) "Ctrl-s / passer à la fenêtre Fx où qu'il se trouve dans la liste des fenêtres ouvertes / Ctrl-r" lié à 1 clé inutilisée évite la frustration de tâches inintéressantes et me sauvera finalement les bras de RSI :)