ऑनलाइन टूल के साथ ब्राउज़र के प्रिंट आउटपुट का परीक्षण कैसे करें?

Question

मैंने उपयोग किया है (सामान्य रूप से) @media print नियम यह निर्दिष्ट करने के लिए कि वेब पेज का प्रिंट ऑनलाइन संस्करण के लिए अलग होना चाहिए। यह काफी अच्छा काम करता है, लेकिन परीक्षण वास्तव में मुश्किल है। क्या मैं आमतौर पर करना है निम्नलिखित कदम हैं:

1. screen और print के लिए अलग शैली बनाएँ।
2. स्क्रीन मोड में अपना पृष्ठ प्रारंभ करें
3. पृष्ठ प्रिंट करें उदा। एक पीडीएफ प्रिंटर के लिए।
4. परिणाम देखें।
5. गलत व्यवहार करने वाले नियमों को खोजने का प्रयास करें।

मैं करना चाहते हैं क्या है (लेकिन किसी भी ब्राउज़र के साथ यह करने के लिए सक्षम नहीं था):

1. screen और print के लिए अलग शैली बनाएँ।
स्क्रीन मोड
2. पूर्वावलोकन प्रिंट मोड में जाएं (ओपेरा के लिए उदाहरण के लिए, फायरफॉक्स उपलब्ध है)
3. उपयोग Firebug (Firefox) या Dragonfly (ओपेरा) की तरह उपलब्ध उपकरणों में अपने पृष्ठ शुरू डोम और निरीक्षण करने के लिए
4. वर्तमान शैलियों।
5. फ्लाई पर सीएसएस बदलें, पृष्ठ को फिर से लोड करें, और परिणाम और फिर डोम देखें।

क्या कोई ब्राउज़र या ब्राउज़र, प्लगइन और प्रक्रिया का संयोजन समान परिणाम प्राप्त करने के लिए उपलब्ध है? यदि आपके पास विचार है कि फाइलों के संगठनों को कैसे बदला जाए, तो इच्छा परिणाम प्राप्त करने के लिए सबसे कम परिवर्तनों के साथ, आपका स्वागत है।

Answer 1

फ़ायरफ़ॉक्स प्लगिंग जिसे "वेब डेवलपर" कहा जाता है (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) में "मीडिया प्रकार द्वारा प्रदर्शित सीएसएस" विकल्प है।

Answer 2

क्या आपने Print Friendly Google क्रोम एक्सटेंशन के साथ प्रयास किया है।

यह एक अच्छा एक्सटेंशन है जो एक बटन जोड़ता है और एक क्लिक पर वेब पेज के पीडीएफ उत्पन्न करता है। आशा है कि आपकी वर्तमान प्रक्रिया से अधिक आसान हो सकता है।

Answer 3

मुझे Using Rails 3.1 assets pipeline to conditionally use certain css से प्रेरित मेरी समस्या का एक अलग समाधान मिला है।यह ऐसे काम करता है: अपने स्टाइलशीट कि

• स्क्रीन के लिए उपयुक्त हैं में

  <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
  <link href="screen.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="print.css" media="print" rel="stylesheet" type="text/css" /> 
  

• अलग सभी नियमों: स्टाइलशीट के लिए निम्नलिखित निर्देशों फ़ाइल

  मुख्य HTML में

  • उपयोग और प्रिंट (स्टाइल शीट: application.css)

  • केवल स्क्रीन के लिए उपयुक्त (स्टाइल शीट: screen.css)
  • उचित केवल प्रिंट के लिए (स्टाइल शीट: print.css)

• अपने वेब पेज का प्रिंट-आउट के परीक्षण के दौरान, अपने मुख्य HTML फ़ाइल में स्टाइलशीट स्विच:

  <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
  <link href="screen.css" media="print" rel="stylesheet" type="text/css" /> 
  <link href="print.css" media="screen" rel="stylesheet" type="text/css" /> 
  

media="print|screen" के लिए दूसरी और तीसरी पंक्ति में स्विच पर ध्यान दें।

परिणाम के रूप में, अब आप अपने मुख्य HTML फ़ाइल कहते हैं, और यदि आप इसे सामान्य परिस्थितियों में प्रिंट आउट यह कैसा दिखाई देगा, करने में सक्षम हैं। सभी उपकरण आप सामान्य रूप से उपयोग (फ़ायरफ़ॉक्स Firebug, Chrome डेवलपर टूल, ओपेरा ड्रेगनफ्लाई, ...) के रूप में सामान्य रूप से तो आप तेज़ी से अपने डोम परिवर्तन सीएसएस जाँच, बक्से देखते हैं, और अभी तो अपना पृष्ठ पुनः लोड करने में सक्षम हैं काम करेंगे, ।

मेरे लिए बहुत अच्छी तरह से काम करता है, अगर मैं कुछ कमियां अधिक ठोकर जाएगा, मैं वापस आ जाओ और notate कि रूप में अच्छी तरह होगा।

Answer 4

आप अलग फ़ाइलों में अपने प्रिंट & स्क्रीन सीएसएस नियमों को निर्दिष्ट, तो आप इस काफी आसानी से Chrome डेवलपर टूल का उपयोग कर सकते हैं। अपने पेज को लोड करें और डेवलपर टूल्स खोलें। "तत्व" दृश्य से, मीडिया = "प्रिंट" लाइन संपादित करें ताकि यह मीडिया = "सब" पढ़ सके।

उदाहरण के लिए

, अगर आप की तरह अपने स्टाइल शीट लिंक:

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" /> 

बदलें:

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" /> 

पढ़ने के लिए:

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" /> 

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

Answer 5

यहाँ एक अभ्यास है कि मैं प्रिंट के लिए स्टाइल के साथ उपयोगी पाया है जब प्रिंट लेआउट सामान्य स्टाइल के एक संशोधन की जरूरत है है।

1. @media प्रिंट {} का उपयोग करता है प्रिंट शैलियों फ्रेम करने के लिए एक प्रिंट शैली पत्रक है कि शैली पत्रक पिछले बनाएं
2. लागू
3. प्रिंट शैलियों पर काम कर रहे, अस्थायी रूप से लाइनों है कि आपके प्रिंट शैलियों फ्रेम बाहर टिप्पणी करते हुए
4. उपयोग Firebug और आप में वेब डेवलपर आदी रास्ता
5. टिप्पणी हटाएं मीडिया की तरह bracketing

कुछ:

 
/* @media print { */ 

    #sidebar {display:none;} 

/* } */ 

Answer 6

क्रोम डेवलपर टूल्स में यह सुविधा है।

1. उस पृष्ठ के लिए क्रोम डेवलपर टूल खोलें जिसे आप परीक्षण करना चाहते हैं।
2. खोलें यदि पहले से खुला नहीं है। (एएससी।)
3. इम्यूलेशन टैब खोलें।
4. बाएं मेनू में मीडिया पर क्लिक करें।
5. चेक सीएसएस मीडिया का चयन करें बॉक्स के प्रिंट चयन

स्रोत: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types