Vous utilisez l'inspecteur d'éléments de Chrome en mode Aperçu avant impression?

666

Je travaille sur le développement d'un site Web et je dois travailler sur la vue d'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 Aperçu avant impression.

Existe-t-il un plug-in Chrome ou une autre manière de modifier votre support d'affichage dans Chrome lui-même, pour afficher une page comme le ferait une imprimante? Je suppose qu'il n'a pas de solution spécifique à Chrome, mais c'est mon navigateur principal, donc ce serait bien d'avoir une solution dans le navigateur.

En ce moment, je me concentre uniquement sur le support d'aperçu avant impression, mais il serait idéal de pouvoir passer à n'importe quel type de support pris en charge (c'est-à-dire tous / braille / en relief / portable / impression / projection / écran / discours / tty / la télé).

google-chrome google-chrome-devtools web-inspector print-preview David Stinemetze
la source
1
en relation: stackoverflow.com/questions/2452713/… , stackoverflow.com/questions/726825/…

Réponses:

1158

Remarque: Cette réponse couvre plusieurs versions de Chrome, faites défiler pour voir v52 , v48 , v46 , v43 et v42 chacune avec leurs modifications mises à jour.

Chrome v52 +:

  • Ouvrez les outils de développement (Windows: F12ou Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
  • Cliquez sur le bouton Personnaliser et contrôler le menu du hamburger DevTools et choisissez Plus d'outils> Paramètres de rendu (ou Rendu dans les versions plus récentes).
  • Cochez la case Emuler le support d'impression dans l' onglet Rendu et sélectionnez le type de support d' impression .

Chrome v52 +

Chrome v48 + (Merci Alex d'avoir remarqué):

  • Ouvrez les outils de développement ( CTRLSHIFTIou F12)
  • Cliquez sur le bouton Basculer le mode du périphérique dans le coin supérieur gauche ( CTRLSHIFTM).
  • Assurez-vous que la console est affichée en cliquant sur Afficher la console dans le menu en (1) (la ESCtouche fait basculer la console si la barre d'outils développeur est active).
  • Cochez Émuler le support d'impression dans l'onglet de rendu qui peut être ouvert en sélectionnant Rendu dans le menu à (2).

Chrome v48 +

Chrome v46 +:

  • Ouvrez les outils de développement ( CTRLSHIFTIou F12)
  • Cliquez sur le bouton Basculer le mode du périphérique 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 la ESCtouche pour basculer la console (ne fonctionne que lorsque Developer Toolbar a le focus).
  • Ouvrez les onglets Émulation (4)> Média (5) , vérifiez le support CSS et sélectionnez imprimer (3).

Prise en charge de Chrome v46 +

Chrome v43 +:

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

Émuler la requête des médias imprimés sur Chrome v43

Chrome v42:

  • Ouvrez les outils de développement ( CTRLSHIFTIou F12)
  • Cliquez sur le bouton Basculer le mode du périphérique dans le coin supérieur gauche (1).
  • Assurez-vous que le tiroir est affiché en cliquant sur le bouton Afficher le tiroir (2) ou en appuyant sur la ESCtouche pour basculer le tiroir.
  • Sous Émulation> Média, vérifiez le média CSS et sélectionnez imprimer (3).

Émuler la requête des médias imprimés sur Chrome v42

lmeurs
la source
14
Je peux le confirmer, alors j'en ai fait la réponse approuvée. Je ne sais pas pourquoi ils insistent pour le déplacer toutes les quelques versions.
David Stinemetze
8
Je l'ai trouvé dans Chrome 48, mais ils l'ont à nouveau déplacé: Allez dans "rendu" dans le tiroir, cochez "Émuler le support d'impression".
Olemak
7
Ces changements fréquents sont la chose la plus stupide que j'ai vue sortir de Google pour l'instant! Une telle perte de temps.
isapir
8
Malheureusement, cela n'émule pas toujours la même chose que l'aperçu avant impression, donc pas génial pour le débogage. C'est bon pour voir la disposition générale et les styles.
Confuzing
18
Cet émulateur "d'impression" est totalement inutile. Il n'émule pas correctement la page, car ce que vous voyez dans le navigateur ne ressemblera en rien à ce que vous voyez dans l'aperçu avant impression. Quelqu'un at-il une solution de travail?
Ian S
168

Modifié dans Chrome 32 35+

(Dans Chrome 35+, l'onglet "Emulation" est présent par défaut. De plus, la console est disponible à partir de n'importe quel onglet principal.)

  1. Dans DevTools, accédez à paramètres-> Remplacements
  2. activer "Afficher la vue d'émulation dans le tiroir de la console"
  3. Fermez les paramètres, accédez à l'onglet «Éléments»
  4. Appuyez Escpour afficher la console
  5. Choisissez l'onglet "Emulation", cliquez sur "Screen"
  6. Faites défiler jusqu'à "CSS Media", sélectionnez "imprimer"

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

Activer les remplacements

Pas de co
la source
1
Pour refléter cette mise à jour, je suis allé de l'avant et l'ai marqué comme la bonne réponse maintenant.
David Stinemetze
3
L'onglet Remplacements n'est plus là dans Chrome 36 (je ne sais pas quand cela a été modifié). L'onglet Emulation est présent par défaut.
ebruchez
1
Est-ce juste moi ou l'option média CSS a-t-elle disparu dans Chrome 36? Maintenant, ne peut sélectionner qu'en fonction d'un appareil mobile spécifique. MISE À JOUR: doh. Selon les instructions ci-dessus, vous devez littéralement cliquer sur "Écran". Pas immédiatement évident qu'il est cliquable.
Ted
1
Le seul problème que j'ai trouvé, maintenant que je l'utilise, c'est que ce n'est pas vraiment ce que Chrome imprime. Cela est extrêmement évident avec Bootstrap 3.x où les médias utiliseront grid-md alors que l'aperçu avant impression utilise grid-sm
Sammaye
3
Chrome 39 c'est sous "média". vous devez activer l'émulation de périphérique en cliquant d'abord sur la petite icône du téléphone à gauche de la barre supérieure de devtools, puis sur les 3 points en haut à droite de l'émulateur de périphérique.
Danny Staple
73

Depuis Chrome 32, vous avez l' CSS mediaoption dans la Screensection de l' Emulationonglet du tiroir .

Il vous suffit de l'activer, de le sélectionner printcomme type de support cible et - voici - votre page est rendue [presque] comme elle sera imprimée.

Utilisez Escpour faire apparaître le tiroir s'il n'est pas visible.

Alexander Pavlov
la source
J'espérais que ce serait plus simple que cela, mais je suppose que cela devra faire pour l'instant. Ce serait bien si cela était éventuellement intégré automatiquement à l'un des outils.
David Stinemetze
Lorsque j'en aurai l'occasion, je devrai essayer. Je peux m'en tenir à la méthode de @ Jon-YYC jusque-là.
David Stinemetze
J'utilise la version 28 sur mac et ne vois pas cette option ... quelqu'un d'autre a ce problème?
Aaron Hill
2
@AaronHill J'utilise la version 28 sur un Mac et je n'ai aucun problème avec. Bien que vous ne soyez peut-être pas entré dans la boîte de dialogue des paramètres. Vous pouvez le trouver en cliquant sur l'icône d'engrenage dans le coin inférieur droit de l'inspecteur d'éléments.
David Stinemetze
2
Cette réponse est désormais obsolète.
Flimm
23

Depuis Chrome 48 (et peut-être quelques versions plus tôt), la fonction semble avoir encore bougé:

Les premières étapes sont inchangées:

  1. Appuyez F12pour afficher les outils de développement

  2. Appuyez ESCpour ouvrir la console

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

Sélection des onglets

Réglage de la sélection

Halle Knast
la source
20

Veuillez consulter cet article

Ouvrir l'inspecteur d'outils de développement Chrome

Passez ensuite à l'onglet "overrides"

Config ouverte / Paramètres

adardesign
la source
3
Cette réponse est désormais obsolète.
Flimm
14

Depuis Chrome 48+, vous pouvez accéder à l'aperçu avant impression via les étapes suivantes:

  1. Ouvrez les outils de développement - Ctrl/Cmd+ Shift+ Iou faites un clic droit sur la page et choisissez 'Inspecter'.

  2. Appuyez Escpour 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 «Émuler le support d'impression».

À partir de là, Chrome vous montrera une version imprimée de votre page et vous pouvez inspecter l'élément et dépanner comme vous le feriez pour la version du navigateur.

Image de l'option d'aperçu avant impression de Chrome 49+ dans Dev Tools

NilsyNils
la source
Avez-vous une source pour une mise à jour des instructions DevTools? Je peux comprendre la plupart d'entre eux, mais je cherchais tout cela et j'ai l'impression qu'il y a beaucoup de nouvelles fonctionnalités utiles qui me cachent.
Crystal Miller
1
La meilleure source que j'ai trouvée pour obtenir des informations générales sur les outils de développement est developers.google.com/web/tools/chrome-devtools/?hl=en . J'ai également beaucoup aimé regarder les mises à jour de la dernière version de cette vidéo: youtube.com/watch?v=dJR-n8szgBc .
NilsyNils
7

Si vous déboguez votre CSS à l'aide de l'impression au format PDF dans Google Chrome et que les couleurs d'arrière-plan de votre élément CSS ne s'affichent pas, assurez-vous que la case "Graphiques d'arrière-plan" est cochée. J'ai passé près de 30 minutes à déboguer mon CSS et à me demander ce qui fait que mon arrière-plan CSS est ignoré.

La couleur d'arrière-plan de Google Chrome Print est ignorée

Rosdi Kasim
la source
6

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 Le sélecteur de support d'émulation apparaît en bas

Merci à toutes les autres affiches qui m'ont conduit à cela, et merci à celles qui ont fourni la réponse sans les images.

user2182349
la source
Que je sélectionne l'impression ou l'écran dans "émuler le support", il s'imprime toujours avec la feuille de style d'impression. J'ai fini par utiliser une extension de capture d'écran pleine page à la place. chrome.google.com/webstore/detail/full-page-screen-capture/…
niknah
4

Chrome v67 (mac):

  1. Maintenez enfoncé Cmd+opt+jpour ouvrir les outils de développement
  2. cliquez ...sur sur le côté droit et choisissez: Plus d'outils >> Rendu
  3. Lorsque la fenêtre de rendu apparaît en bas de l'écran, émulez la section CSS Media et choisissez: "Écran" dans la liste déroulante.
  4. Allez dans "Fichier >> Imprimer" et vous devriez voir la vue que vous souhaitez imprimer.

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

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

capture d'écran 1

Comment imprimer la vue "écran": Lorsque la fenêtre de rendu apparaît en bas de l'écran, émulez la section CSS Media et choisissez: "Écran" dans la liste déroulante.

capture d'écran 2

J'espère que cela aide.

Mat
la source
4

Avec les raccourcis disponibles, le moyen le plus rapide est de

  1. Ouvrez les outils de développement

    • Windows: F12ou Ctrl+ Shift+I
    • Mac: Cmd+ Opt+I

  2. Ouvrez le menu de commande

    • Windows: Ctrl+ Shift+P
    • Mac: Cmd+ Shift+P

  3. Tapez printet sélectionnez Émuler le type de support d'impression CSS dans le menu contextuel

    Modifier l'émulation du type de support via le menu de commande

Au vu de l'excellente réponse actuellement émise par les émetteurs , je pense que cette solution pourrait également rester stable dans le temps.

Kariem
la source
1

Chrome v50:

Voie 1:

  1. Menu> Plus d'outils> Paramètres de rendu (voir image)
  2. Vers le bas: onglet Rendu> Émuler le support "imprimer"

Voie 2:

  1. Ouvrir la console [esc]
  2. Menu de la console> rendu
Ben Richter
la source