832 votes

À l’aide de Chrome ' inspecteur élément s en Mode Aperçu avant impression ?

Je suis en train de travailler sur le développement d'un site web et ont besoin de travailler sur la vue d'impression. Généralement quand j'ai des problèmes de mise en page j'utilise google Chrome, Élément de l'Inspecteur. Cependant, cela n'existe pas en mode aperçu avant impression.

Est-il un plugin Chrome ou d'une autre façon de changer votre vision à moyen dans google chrome lui-même, pour afficher une page comme une imprimante? Je suppose qu'il n'a pas un être un Chrome solution, mais c'est mon navigateur principal de sorte qu'il serait agréable d'avoir un navigateur solution.

Droit maintenant, je suis seulement concentré sur l'aperçu avant impression moyenne, mais l'idéal serait d'être en mesure de modifier à tout type de support (c'est à dire tous/braille/relief/ordinateur de poche/imprimer/projection/écran/discours/ats/tv).

Je me rends compte que ce n'est pas spécialement une question de programmation, mais comme il semble utile dans le cadre du processus de développement en général, je pensais que c'était l'endroit le plus approprié pour le publier. Si je l'ai posté ailleurs, je m'en excuse.

172voto

Noco Points 846

Changé en Chrome 32 35+

(Dans Chrome 35+ "Émulation" de l'onglet est présent par défaut. Aussi, la console est disponible à partir de n'importe primaire onglet.)

  1. Dans DevTools, accédez à paramètres-> Remplace
  2. activer "Afficher Émulation afficher dans la console tiroir"
  3. Fermez les paramètres, allez dans "Éléments" de l'onglet
  4. Appuyez sur ÉCHAP 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.

Enable Overrides

76voto

Alexander Pavlov Points 16338

Depuis Chrome 32, vous avez la option dans la section du tiroir `` onglet.

Il suffit de lui permettre, sélectionnez `` comme le média cible tapez et - voici - votre page est rendue [presque] la façon dont elle sera imprimée.

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

21voto

adardesign Points 6182

Veuillez consulter cet article

Open chrome dev tools inspector

Alors goto l’onglet « dérogations »

Open config/Settings

15voto

Jon-YYC Points 170

Si vous souhaitez utiliser google Chrome, Élément Inspecteur d'examiner l'impression des feuilles de style, vous pouvez télécharger l'extension Web Developer pour Chrome. C'est un port direct de la même outil dans Firefox.

Une fois que vous l'avez installé:

  1. Cliquez sur le Développeur Web Icône
  2. Sélectionnez CSS
  3. Cliquez Sur "Afficher Les Styles D'Impression"

La page affiche désormais avec votre impression de la feuille de style appliquée à l'écran. Utilisez l'inspecteur comme d'habitude pour trouver les définitions de style dans votre impression de la feuille de style.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X