[google-chrome] Utilisation de l'Inspecteur des éléments de Chrome en mode Aperçu avant impression?


3 Answers

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. Appuyez sur Esc pour afficher 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.

Question

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é).




Si vous déboguez votre CSS en utilisant Imprimer en 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 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é.




S'il vous plaît voir cet article

Ensuite, allez à l'onglet "overrides"




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

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

  2. Appuyez sur Echap 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.






Related