प्रिंट पूर्वावलोकन मोड में Chrome के तत्व इंस्पेक्टर का उपयोग करना?


666

मैं एक वेबसाइट विकसित करने पर काम कर रहा हूं और प्रिंट दृश्य पर काम करने की जरूरत है। आमतौर पर जब मेरे पास लेआउट के मुद्दे होते हैं तो मैं क्रोम के तत्व निरीक्षक का उपयोग करता हूं। हालाँकि यह प्रिंट पूर्वावलोकन मोड में मौजूद नहीं है।

क्या क्रोम प्लगइन या किसी अन्य तरीके से क्रोम के भीतर अपने देखने के माध्यम को बदलने के लिए, एक पेज को प्रिंटर के रूप में देखना होगा? मुझे लगता है कि इसका क्रोम विशिष्ट समाधान नहीं है, लेकिन यह मेरा प्राथमिक ब्राउज़र है, इसलिए इन-ब्राउज़र समाधान करना अच्छा होगा।

अभी मैं सिर्फ प्रिंट पूर्वावलोकन माध्यम पर ध्यान केंद्रित कर रहा हूं, लेकिन यह किसी भी समर्थित मीडिया प्रकार (जैसे कि सभी / ब्रेल / उभरा / हाथ / प्रिंट / प्रोजेक्शन / स्क्रीन / भाषण / ट्टी /) को बदलने में सक्षम होने के लिए आदर्श होगा। टीवी)।


जवाबों:


1158

नोट: यह उत्तर क्रोम के कई संस्करणों को कवर करता है, v52 , v48 , v46 , v43 और v42 को उनके अद्यतन परिवर्तनों के साथ देखने के लिए स्क्रॉल करें ।

क्रोम v52 +:

  • डेवलपर टूल खोलें (Windows: F12या Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
  • क्लिक करें अनुकूलित और नियंत्रण DevTools हैमबर्गर मेनू बटन और चुनें प्रतिपादन सेटिंग्स अधिक टूल> (या प्रतिपादन नए संस्करण में)।
  • रेंडरिंग टैब पर इम्यूलेट प्रिंट मीडिया चेकबॉक्स की जांच करें और प्रिंट मीडिया प्रकार का चयन करें

क्रोम v52 +

Chrome v48 + (ध्यान देने के लिए धन्यवाद एलेक्स):

  • डेवलपर टूल ( CTRLSHIFTIया F12) खोलें
  • बाएं शीर्ष कोने में टॉगल डिवाइस मोड बटन पर क्लिक करें ( CTRLSHIFTM)।
  • सुनिश्चित करें कि कंसोल को मेनू में शो कंसोल (1) पर क्लिक करके दिखाया गया है ( ESCकुंजी टूल कंसोल को चालू करता है यदि डेवलपर टूलबार पर ध्यान केंद्रित करता है)।
  • रेंडरिंग टैब पर इम्यूलेट प्रिंट मीडिया की जाँच करें जिसे मेनू (2) में रेंडरिंग का चयन करके खोला जा सकता है ।

क्रोम v48 +

Chrome v46 +:

  • डेवलपर टूल ( CTRLSHIFTIया F12) खोलें
  • बाएं शीर्ष कोने (1) में टॉगल डिवाइस मोड बटन पर क्लिक करें ।
  • सुनिश्चित करें कि मेनू बटन (2)> कंसोल दिखाएं (3) पर क्लिक करके या ESCकंसोल को टॉगल करने के लिए कुंजी दबाकर कंसोल को दिखाया गया है (केवल तब काम करता है जब डेवलपर टूलबार का फोकस हो)।
  • इम्यूलेशन (4)> मीडिया (5) टैब खोलें , CSS मीडिया चेक करें और प्रिंट (3) चुनें।

Chrome v46 + समर्थन

Chrome v43 +:

  • चरण 2 पर दराज आइकन बदल गया है।

Chrome v43 पर प्रिंट मीडिया क्वेरी का अनुकरण करें

क्रोम v42:

  • डेवलपर टूल ( CTRLSHIFTIया F12) खोलें
  • बाएं शीर्ष कोने (1) में टॉगल डिवाइस मोड बटन पर क्लिक करें ।
  • सुनिश्चित करें कि ड्राअर शो बटन (2) पर क्लिक करके या ESCदराज को चालू करने के लिए कुंजी दबाकर दिखाया गया है ।
  • अनुकरण के तहत > मीडिया सीएसएस मीडिया की जांच करें और प्रिंट (3) चुनें।

Chrome v42 पर प्रिंट मीडिया क्वेरी का अनुकरण करें


14
मैं इसकी पुष्टि कर सकता हूं इसलिए मैंने इसे स्वीकृत उत्तर दिया। मुझे यकीन नहीं है कि वे इसे हर कुछ रिलीज को आगे बढ़ाने पर जोर देते हैं।
डेविड स्टिनेमेट्ज़

8
इसे क्रोम 48 में मिला, लेकिन उन्होंने इसे फिर से स्थानांतरित कर दिया: ड्रॉअर में "रेंडरिंग" पर जाएं, "प्रिंट मीडिया का अनुकरण करें" जांचें।
ओलेमक

7
ये बार-बार होने वाले बदलाव मैं अभी तक Google से बाहर आने के लिए देखी गई सबसे विनम्र बात है! मेरे समय की ऐसी बर्बादी।
isapir

8
दुर्भाग्य से यह हमेशा एक ही चीज़ का अनुकरण नहीं करता है जो पूर्वावलोकन पूर्वावलोकन दिखाता है, इसलिए डिबगिंग के लिए इतना महान नहीं है। यह देखने के लिए अच्छा है कि सामान्य लेआउट और शैली हालांकि क्या हैं।
कन्फ्यूजिंग

18
यह 'प्रिंट' एमुलेटर पूरी तरह से बेकार है। यह पृष्ठ का ठीक से अनुकरण नहीं करता है, जैसा कि आप ब्राउज़र में देख रहे हैं, ऐसा कुछ नहीं होगा जैसा आप प्रिंट पूर्वावलोकन में देखते हैं। क्या किसी के पास काम का हल है?
इयान एस

168

Chrome 32 35+ में बदला गया

(Chrome 35+ में "इम्यूलेशन" टैब डिफ़ॉल्ट रूप से मौजूद है। इसके अलावा, कंसोल किसी भी प्राथमिक टैब से उपलब्ध है।)

  1. DevTools में, सेटिंग-> ओवरराइड पर जाएं
  2. कंसोल ड्रॉअर में "एम्यूलेशन व्यू दिखाएं" सक्षम करें
  3. सेटिंग्स को बंद करें, 'एलिमेंट्स' टैब पर जाएं
  4. Escकंसोल लाने के लिए मारो
  5. टैब "इम्यूलेशन" चुनें, "स्क्रीन" पर क्लिक करें
  6. "सीएसएस मीडिया" तक स्क्रॉल करें, "प्रिंट" चुनें

यह विकल्प कंसोल टैब में उपलब्ध नहीं है (अभी तक?)।

ओवरराइड सक्षम करें


1
इस अपडेट को प्रतिबिंबित करने के लिए, मैं आगे बढ़ गया हूं और इसे सही उत्तर के रूप में चिह्नित किया है।
डेविड स्टिनेमेट्ज़

3
ओवरराइड्स टैब अब क्रोम 36 में नहीं है (मुझे नहीं पता कि इसे कब बदला गया था)। एमुलेशन टैब डिफ़ॉल्ट रूप से मौजूद होता है।
ebruchez

1
क्या यह सिर्फ मेरे लिए है या क्रोम 36 में CSS मीडिया विकल्प है? अब केवल विशिष्ट मोबाइल डिवाइस के आधार पर चयन कर सकते हैं। अद्यतन: doh। उपरोक्त निर्देशों के अनुसार, शाब्दिक रूप से "स्क्रीन" पर क्लिक करना होगा। तुरंत स्पष्ट नहीं है कि यह क्लिक करने योग्य है।
टेड

1
एकमात्र समस्या जो मुझे मिली है, अब जब मैं इसका उपयोग कर रहा हूं, तो यह है कि वास्तव में क्रोम प्रिंट नहीं करता है। यह बूटस्ट्रैप 3.x के साथ बेहद स्पष्ट है, जहां मीडिया ग्रिड-एमडी का उपयोग करेगा, जबकि प्रिंट पूर्वावलोकन ग्रिड-एसएम का उपयोग करता है
सम्मेद

3
Chrome 39 यह "मीडिया" के अंतर्गत है। आपको पहले devtools शीर्ष पट्टी के बाईं ओर थोड़ा फोन आइकन पर क्लिक करके डिवाइस इम्यूलेशन को सक्षम करना होगा, और फिर डिवाइस एम्यूलेटर के शीर्ष दाईं ओर 3 डॉट्स पर क्लिक करें।
डैनी स्टेपल

73

Chrome 32 के बाद से आपके पास दराज टैब CSS mediaके Screenअनुभाग में विकल्प है Emulation

बस इसे सक्षम करें print, लक्ष्य मीडिया प्रकार के रूप में चयन करें , और - निहारना - आपका पृष्ठ प्रदान किया गया है [लगभग] जिस तरह से इसे मुद्रित किया जाएगा।

Escयदि यह दिखाई नहीं दे रहा है तो ड्रावर को लाने के लिए उपयोग करें ।


मैं उम्मीद कर रहा था कि यह इससे भी सरल होगा, लेकिन मुझे लगता है कि इसे अभी के लिए करना होगा। यह अच्छा होगा यदि यह अंततः उपकरण में से एक में स्वचालित रूप से बनाया गया था।
डेविड स्टिनेमेट्ज़

जब मुझे मौका मिलेगा, तो मुझे यह कोशिश करनी होगी। मैं तब तक @ जॉन-वाईवाईसी की विधि के साथ रह सकता हूं।
डेविड स्टिनेमेट्ज़

Im संस्करण 28 का उपयोग कर रहा हूँ MAC और इस विकल्प को नहीं देखते ... किसी और को यह समस्या है?
आरोन हिल

2
@AaronHill मैं एक मैक पर संस्करण 28 का उपयोग कर रहा हूं और इसके साथ कोई समस्या नहीं है। हालांकि शायद आप वास्तव में सेटिंग संवाद में नहीं आए। आप एलीमेंट इंस्पेक्टर के निचले दाएं कोने में गियर आइकन पर क्लिक करके इसे पा सकते हैं।
डेविड स्टिनेमेट्ज़

2
यह उत्तर अब पुराना है।
फ्लिम

23

Chrome 48 के रूप में (और शायद कुछ संस्करण पहले), फ़ंक्शन फिर से स्थानांतरित हो गया लगता है:

पहले कुछ चरण अपरिवर्तित हैं:

  1. F12डेवलपर टूल को लाने के लिए दबाएँ

  2. ESCकंसोल खोलने के लिए दबाएँ

पिछले उत्तरों के अनुसार, सेटिंग को "इम्यूलेशन" टैब के तहत पाया जा सकता है। जैसा कि नीचे की छवियों में दिखाया गया है, इसे अब "रेंडरिंग" टैब पर ले जाया गया है, जिसे "कंसोल" टैब के बाईं ओर तीन बिंदुओं पर क्लिक करके लाया जा सकता है।

टैब चयन

चयन सेट करना



14

Chrome 48+ के अनुसार, आप निम्न चरणों के माध्यम से प्रिंट पूर्वावलोकन का उपयोग कर सकते हैं:

  1. ओपन देव टूल - Ctrl/Cmd+ Shift+ Iया पेज पर राइट क्लिक करें और 'इंस्पेक्ट' चुनें।

  2. Escअतिरिक्त दराज खोलने के लिए मारो ।

  3. यदि 'रेंडरिंग' पहले से शो नहीं हो रहा है, तो 3 डॉट कबाब पर क्लिक करें और 'रेंडरिंग' चुनें।

  4. 'प्रिंट मीडिया का अनुकरण करें' चेकबॉक्स जांचें।

वहां से Chrome आपको अपने पृष्ठ का प्रिंट संस्करण दिखाएगा और आप ब्राउज़र संस्करण के समान तत्व और समस्या निवारण का निरीक्षण कर सकते हैं।

देव टूल्स में क्रोम 49+ प्रिंट प्रीव्यू विकल्प की छवि


क्या आपके पास एक अद्यतन DevTools निर्देश के लिए एक स्रोत है? मैं उनमें से अधिकांश का पता लगा सकता हूं , लेकिन मैं इसके लिए पूरी खोज कर रहा था और मुझे ऐसा लग रहा है कि बहुत सारी सहायक नई सुविधाएँ हैं जो मुझसे छिपा रही हैं।
क्रिस्टल मिलर

1
सामान्य देव उपकरण जानकारी के लिए मैंने जो सबसे अच्छा स्रोत पाया है, वह है डेवलपर .google.com/web/tools/chrome-devtools/?hl=en । मुझे वास्तव में इस वीडियो में नवीनतम संस्करण के लिए अपडेट देखने में भी मज़ा आया: youtube.com/watch?v=dJR-n8szgBc
NilsyNils

7

यदि आप Google Chrome में Print As PDF का उपयोग करके अपने CSS को डीबग कर रहे हैं और आपके CSS तत्व पृष्ठभूमि रंग नहीं दिखा रहे हैं, तो सुनिश्चित करें कि 'बैकग्राउंड ग्राफिक्स' चेकबॉक्स टिक गया है। मैंने लगभग 30 मिनट अपने सीएसएस डिबगिंग में बिताए और सोच रहा था कि मेरे सीएसएस बैकग्राउंड को नजरअंदाज क्यों किया जा रहा है।

Google Chrome प्रिंट पृष्ठभूमि रंग को अनदेखा किया गया


6

Mac पर Chrome v51 के तहत, मैंने ऊपरी दाएं कोने में क्लिक करके रेंडरिंग सेटिंग्स पाईं, और टूल> रेंडरिंग सेटिंग्स का चयन किया और विंडो के निचले भाग में दिए गए विकल्पों में इम्यूलेट मीडिया बटन की जांच की।

क्रोम v51 मैक नीचे में मीडिया चयनकर्ता अनुकरण करें

अन्य सभी पोस्टर्स के लिए धन्यवाद जिन्होंने मुझे इस तक पहुंचाया, और उन लोगों को श्रेय दिया जो बिना छवियों के उत्तर प्रदान करते हैं।


चाहे मैं "इम्यूलेट मीडिया" में प्रिंट या स्क्रीन का चयन करता हूं, यह अभी भी प्रिंट स्टाइलशीट के साथ प्रिंट करता है। मैंने इसके बजाय एक पूर्ण पृष्ठ स्क्रीनशॉट एक्सटेंशन का उपयोग करके समाप्त किया। chrome.google.com/webstore/detail/full-page-screen-capture/…
niknah

4

क्रोम v67 (मैक):

  1. Cmd+opt+jदेव उपकरण खोलने के लिए दबाए रखें
  2. ...दाहिने तरफ क्लिक करें , और चुनें: अधिक उपकरण >> प्रतिपादन
  3. जब रेंडरिंग विंडो स्क्रीन के नीचे दिखाई देती है, तो CSS मीडिया सेक्शन का अनुकरण करें और ड्रॉपडाउन से "स्क्रीन" चुनें।
  4. "फ़ाइल >> प्रिंट" पर जाएं और आपको वह दृश्य देखना चाहिए जिसे आप प्रिंट करना चाहते हैं।

Mac पर Chrome v67 के लिए उपरोक्त विवरण की छवियां:

रेंडरिंग टैब को खोजने के लिए कहां: ...दाहिनी ओर क्लिक करें , और चुनें: अधिक उपकरण >> रेंडरिंग

स्क्रीनशॉट 1

प्रिंट करने के लिए "स्क्रीन" दृश्य कैसे प्राप्त करें: जब रेंडरिंग विंडो स्क्रीन के नीचे दिखाई देती है, तो सीएसएस मीडिया अनुभाग का अनुकरण करें और ड्रॉपडाउन से "स्क्रीन" चुनें।

स्क्रीनशॉट 2

आशा है ये मदद करेगा।


4

शॉर्टकट उपलब्ध होने के साथ, सबसे तेज़ तरीका है

  1. डेवलपर टूल खोलें

    • विंडोज: F12या Ctrl+ Shift+I
    • मैक: Cmd+ Opt+I
  2. कमांड मेनू खोलें

    • विंडोज: Ctrl+ Shift+P
    • मैक: Cmd+ Shift+P
  3. टाइप करें printऔर संदर्भ मेनू से सीएसएस प्रिंट मीडिया प्रकार का अनुकरण करें

    मीडिया प्रकार एमुलेशन विया कमांड मेनू बदलें

Lmeurs द्वारा उत्कृष्ट और वर्तमान में सबसे अधिक उत्कीर्ण जवाब को देखते हुए , मुझे लगता है कि यह समाधान समय के साथ भी स्थिर रह सकता है।


1

क्रोम v50:

रास्ता 1:

  1. मेनू> अधिक उपकरण> सेटिंग रेंडर करना (छवि देखें)
  2. नीचे: टैब प्रतिपादन> मीडिया का अनुकरण "प्रिंट"

रास्ता 2:

  1. कंसोल खोलें [esc]
  2. कंसोल मेनू> रेंडरिंग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.