web-dev-qa-db-fra.com

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

Je travaille au développement d'un site Web et j'ai besoin de travailler sur la vue imprimée. J'utilise généralement l'inspecteur d'éléments de Chrome lorsque j'ai des problèmes de mise en page. Toutefois, cela n’existe pas en mode d’aperçu avant impression.

Existe-t-il un plug-in Chrome ou un autre moyen de modifier votre support d'affichage dans Chrome lui-même, pour afficher une page comme le ferait une imprimante? Je suppose que ce n’est pas une solution spécifique à Chrome, mais c’est mon navigateur principal, il serait donc agréable d’avoir une solution intégrée au navigateur.

Pour le moment, 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 (par exemple, tous/braille/en relief/portable/impression/projection/écran/parole/tty/la télé).

google-chromegoogle-chrome-devtoolsweb-inspectorprint-preview
611
David Stinemetze

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

Chrome v52 +:

  • Ouvrez le Outils de développement ​​(Windows: F12 ou Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Cliquez sur le bouton Personnaliser et contrôler DevTools hamburger et choisissez Autres outils> Paramètres de rend (ou Rend dans les versions les plus récentes).
  • Cochez la case Émuler le support d'impression dans l'onglet Rend et sélectionnez le type de support Imprimer.

Chrome v52+

Chrome v48 + (merci Alex de l'avoir remarqué):

  • Ouvrez les outils de développement (CTRLSHIFTI ou F12)
  • Cliquez sur le bouton Basculer en mode appareil dans le coin supérieur gauche (CTRLSHIFTM).
  • Assurez-vous que la console est affichée en cliquant Show console dans le menu en (1) (ESC touche bascule la console si la barre d'outils Developer a le focus).
  • Cochez Émuler le support d'impression dans l'onglet de rendu que vous pouvez ouvrir en sélectionnant Rend dans le menu en (2).

Chrome v48+

Chrome v46 +:

  • Ouvrez les outils de développement (CTRLSHIFTI ou F12)
  • Cliquez sur le bouton Basculer appareil 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 touche ESC touche pour basculer la console (fonctionne uniquement lorsque la barre d’outils Developer a le focus).
  • Ouvrez les onglets Emulation (4)> Média (5), cochez la case CSS media et sélectionnez print ​​(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 (CTRLSHIFTI ou F12)
  • Cliquez sur le bouton Basculer appareil 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 touche ESC touche pour basculer le tiroir.
  • Sous Émulation> Média, cochez Média CSS et sélectionnez Imprimer (3).

Emulate print media query on Chrome v42

1070
lmeurs

Changé dans Chrome 32 35+

(Dans Chrome 35+, l'onglet "Emulation" est présent par défaut. La console est également 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, allez dans l'onglet 'Eléments'
  4. Frappé Esc faire monter la console
  5. Choisissez l'onglet "Emulation", cliquez sur "Ecran"
  6. Faites défiler jusqu'à "CSS Media", sélectionnez "print"

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

Enable Overrides

165
Noco

Depuis Chrome 32, vous avez l'option CSS media dans la section Screen de l'onglet tiroir Emulation.

Activez-la simplement, sélectionnez print comme type de support cible et, voici, votre page est rendue [presque] comme elle sera imprimée.

Utilisation Esc pour faire apparaître le tiroir s'il n'est pas visible.

72
Alexander Pavlov

À partir de Chrome 48 (et peut-être quelques versions plus anciennes), la fonction semble avoir encore changé:

Les premières étapes sont inchangées:

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

  2. Presse ESC ouvrir la console

Selon les réponses précédentes, le paramètre pourrait alors être trouvé sous l'onglet "Emulation". Comme le montrent les images ci-dessous, il a maintenant été déplacé dans l'onglet "Rendu", que vous pouvez afficher en cliquant sur les trois points situés à gauche de l'onglet "Console".

Tab selection

Setting selection

21
Halle Knast

S'il vous plaît voir Cet article

Open chrome dev tools inspector

Puis allez à l'onglet "overrides"

Open config/Settings

20
adardesign

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

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

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

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

  4. Cochez la case "Emuler le support d'impression".

À partir de là, Chrome vous montrera une version imprimée de votre page et vous pourrez inspecter un élément et résoudre les problèmes de la même manière que la version du navigateur.

Image of Chrome 49+ Print Preview option in Dev Tools

13
NilsyNils

Si vous déboguez votre CSS en utilisant Print As 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 à cocher "Graphiques en arrière-plan" est cochée. J'ai passé presque 30 minutes à déboguer mes feuilles de style CSS et à me demander en quoi le fond CSS était ignoré.

Google Chrome Print background color ignored

7
Rosdi Kasim

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

Chrome v51 MacEmulate media selector appears in the bottom

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

6
user2182349

Chrome v67 (mac):

  1. Maintenez Cmd+opt+j ouvrir les outils de développement
  2. cliquez sur le ... sur le côté droit et choisissez: Plus d'outils >> Rendu
  3. Lorsque la fenêtre Rendu s'affiche en bas de l'écran, section Emulate CSS Media et choisissez: "Screen" dans le menu déroulant.
  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 ... à droite, puis choisissez: Plus d'outils >> Rendu

screenshot 1

Comment obtenir la vue "écran" à imprimer: Lorsque la fenêtre Rendu s'affiche en bas de l'écran, section Emuler CSS Media et choisissez: "Écran" dans le menu déroulant.

screenshot 2

J'espère que ça aide.

2
Matt

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

  1. Ouvrez les outils de développement

    • Les fenêtres: F12 ou Ctrl+Shift+I
    • Mac: Cmd+Opt+I

  2. Ouvrez le menu de commande

    • Les fenêtres: Ctrl+Shift+P
    • Mac: Cmd+Shift+P

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

    Change Media Type Emulation Via Command Menu

En regardant l'excellent et actuellement le plus voté réponse de lmeurs , je pense que cette solution pourrait également rester stable dans le temps.

1
Kariem

Chrome v50:

Voie 1:

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

Voie 2:

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