Question Utilisation de l'Inspecteur des éléments de Chrome en mode Aperçu avant impression?


Je travaille sur le développement d'un site web et j'ai besoin de travailler sur l'impression. Généralement, lorsque j'ai des problèmes de mise en page, j'utilise l'inspecteur d'éléments de Chrome. Cependant, cela n'existe pas en mode d'aperçu avant impression.

Existe-t-il un plugin Chrome ou un autre moyen de changer votre support d'affichage dans le chrome lui-même, pour afficher une page comme une imprimante? Je suppose que ce n'est pas une solution spécifique à Chrome, mais c'est mon navigateur principal, donc ce serait bien d'avoir une solution dans le navigateur.

À l'heure actuelle, je me concentre uniquement sur le support d'aperçu avant impression, mais il serait idéal de pouvoir passer à l'un des types de support pris en charge (tous / braille / gaufrés / ordinateur de poche / impression / projection / écran / discours / tty / la télé).


514
2018-03-02 22:03


origine


Réponses:


Note: Cette réponse couvre plusieurs versions de Chrome, faites défiler pour voir v52, v48, v46, v43 et v42 chacun avec leurs changements mis à jour.

Chrome v52 +:

  • Ouvrez le Outils de développement (Les fenêtres: F12 ou Ctrl+Décalage+je, Mac: Cmd+Opter+je)
  • Clique le Personnalisez et contrôlez DevTools bouton de menu hamburger et choisissez Plus d'outils> Paramètres de rendu (ou Le rendu dans les versions plus récentes).
  • Vérifier la Émuler les médias d'impression case à cocher à Le rendu onglet et sélectionnez le Impression type de support.

Chrome v52+

Chrome v48 + (merci Alex pour avoir remarqué):

  • Ouvrez les outils de développement (CTRLDÉCALAGEje ou F12)
  • Clique le Basculer le mode de l'appareil bouton dans le coin supérieur gauche (CTRLDÉCALAGEM).
  • Assurez-vous que la console est affichée en cliquant Afficher la console dans le menu à (1) (ESC La touche bascule la console si la barre d'outils Developer a le focus).
  • Vérifier Émuler les médias d'impression à l'onglet de rendu qui peut être ouvert en sélectionnant Le rendu dans le menu à (2).

Chrome v48+

Chrome v46 +:

  • Ouvrez les outils de développement (CTRLDÉCALAGEje ou F12)
  • Clique le Basculer le mode de l'appareil bouton dans le coin supérieur gauche (1).
  • Assurez-vous que la console est affichée en cliquant sur le bouton de menu (2)> Afficher la console (3) ou en appuyant sur ESC clé pour basculer la console (ne fonctionne que lorsque la barre d'outils Developer a le focus).
  • Ouvrez le Émulation (4)> Médias (5) onglets, vérifier Média CSS et sélectionnez impression (3).

Chrome v46+ support

Chrome v43 +:

  • L'icône du tiroir à l'étape 2 a changé.

Emulate print media query on Chrome v43

Chrome v42:

  • Ouvrez les outils de développement (CTRLDÉCALAGEje ou F12)
  • Clique le Basculer le mode de l'appareil bouton dans le coin supérieur gauche (1).
  • Assurez-vous que le tiroir est affiché en cliquant sur Afficher le tiroir bouton (2) ou en appuyant sur ESC clé pour basculer le tiroir.
  • En dessous de Emulation> Médias vérifier Média CSS et sélectionnez impression (3).

Emulate print media query on Chrome v42


871
2018-04-30 07:53



Modifié dans Chrome 32 35+

(Dans Chrome 35+, l'onglet "Emulation" est présent par défaut.La console est également disponible depuis n'importe quel onglet principal.)

  1. Dans DevTools, accédez aux paramètres-> Remplacements
  2. activer "Afficher l'affichage de l'émulation dans le tiroir de la console" 
  3. Fermer les paramètres, accédez à l'onglet "Eléments"
  4. Frappé Esc pour élever la console
  5. Choisissez l'onglet "Émulation", cliquez sur "Écran"
  6. Faites défiler jusqu'à "CSS Media", sélectionnez "imprimer"

Cette option n'est pas (encore?) Disponible dans l'onglet console.

Enable Overrides


165
2018-01-16 08:38



Depuis Chrome 32, vous avez le CSS media option dans le Screen section du tiroir Emulation languette.

Activez-le, sélectionnez print comme le type de média cible, et - voyez - votre page est rendue [presque] comme elle sera imprimée.

Utilisation Esc pour faire apparaître le tiroir si ce n'est pas visible.


72
2018-03-09 14:54



S'il te plait regarde Cet article

Open chrome dev tools inspector

Ensuite, allez à l'onglet "overrides"

Open config/Settings


21
2018-02-26 18:27



A partir de Chrome 48 (et peut-être quelques versions plus tôt), la fonction semble avoir encore évolué:

Les premières étapes sont inchangées:

  1. presse F12 pour faire apparaître les outils de développement

  2. presse ESC ouvrir la console

Selon les réponses précédentes, le réglage pourrait alors être trouvé sous l'onglet "Emulation". Comme indiqué dans les images ci-dessous, il a été déplacé vers l'onglet "Rendu", qui peut être affiché en cliquant sur les trois points à gauche de l'onglet "Console".

Tab selection

Setting selection


20
2018-01-27 14:55



Depuis Chrome 48+, vous pouvez accéder à l'aperçu avant impression en procédant comme suit:

  1. Outils de développement ouverts - Ctrl / Cmd + Décalage + je ou faites un clic droit sur la page et choisissez "Inspecter".

  2. Frappé Esc pour ouvrir le tiroir supplémentaire.

  3. Si "Rendu" n'est pas déjà affiché, cliquez sur le kebab 3 points et choisissez "rendu".

  4. Cochez la case "Emuler les supports d'impression".

De là, Chrome vous montrera une version imprimée de votre page et vous pouvez inspecter les éléments et résoudre les problèmes comme vous le feriez pour la version du navigateur.

Image of Chrome 49+ Print Preview option in Dev Tools


10
2017-11-23 19:09



Si vous déboguez votre CSS à l'aide de l'option Imprimer en tant que PDF dans Google Chrome et que les couleurs d'arrière-plan de votre élément CSS ne s'affichent pas, vérifiez que la case à cocher "Graphiques d'arrière-plan" est cochée. J'ai passé près de 30 minutes à déboguer mon CSS et je me demandais ce qui faisait que mon arrière-plan CSS était ignoré.

Google Chrome Print background color ignored


6
2017-10-18 06:27



Sous Chrome v51 sur un Mac, j'ai trouvé les paramètres de rendu en cliquant dans le coin supérieur droit, en choisissant Plus d'outils> Paramètres de rendu et en cochant le bouton Émuler le média dans les options proposées en bas de la fenêtre.

Chrome v51 Mac Emulate media selector appears in the bottom

Merci à toutes les autres affiches qui m'ont conduit à cela, et le mérite de ceux qui ont fourni la réponse sans les images.


6
2018-05-27 12:45



Chrome v50:

Voie 1:

  1. Menu> Plus d'outils> Paramètres de rendu (voir image)
  2. Bas: onglet Rendu> Émuler le média "imprimer"

Way 2:

  1. Ouvrir la console [esc]
  2. Menu Console> rendu

1
2018-05-11 15:28



Chrome v67 (mac):

  1. Maintenez enfoncé Cmd + opt + j ouvrir les outils de dev
  2. clique le ... sur le côté droit, et choisissez: Plus d'outils >> Rendu
  3. Lorsque la fenêtre Rendu apparaît au bas de l'écran, émuler la section CSS Media et choisissez: "Screen" dans la liste déroulante.
  4. Allez dans "Fichier >> Imprimer" et vous devriez voir la vue que vous voulez imprimer.

Images de la description ci-dessus pour Chrome v67 sur un mac:

Où trouver l'onglet Rendu: Cliquez sur le ... sur le côté droit, et choisissez: Plus d'outils >> Rendu

screenshot 1

Comment faire imprimer la vue "écran": Lorsque la fenêtre Rendu apparaît en bas de l'écran, émuler la section CSS Média et choisir: "Ecran" dans la liste déroulante.

screenshot 2

J'espère que cela aide.


0
2018-06-15 08:38