प्रिंट स्टाइलशीट डीबग करने के सुझाव?

Question

मैं हाल ही में एक वेबसाइट के लिए एक प्रिंट स्टाइलशीट पर काम कर रहा हूं, और मुझे एहसास हुआ कि मैं इसे ट्वीक करने के प्रभावी तरीकों के लिए नुकसान में था। ऑन-स्क्रीन लेआउट पर काम करने के लिए एक पुनः लोड चक्र होना एक बात है:

• कोड बदलें
• आदेश-टैब
• पुनः लोड करें

लेकिन जब आप प्रिंट करने का प्रयास कर रहे हों तो यह पूरी प्रक्रिया बहुत अधिक कठिन हो जाती है:

• कोड बदलें
• आदेश-टैब
• पुनः लोड करें
• प्रिंट
• प्रिंट-प्रीव्यू इमेज में स्क्विंट
• आगे के निरीक्षण के लिए पूर्वावलोकन में पीडीएफ खोलें

क्या ऐसे उपकरण हैं जो मुझे याद आ रहे हैं? क्या WebKit के इंस्पेक्टर के पास "यह दिखावा किया गया मीडिया है" चेकबॉक्स है? क्या कोई जादू है जो फायरबग ( कंपकंपी ) कर सकता है?

Comments

एक ब्राउज़र के "प्रिंट पूर्वावलोकन" फ़ंक्शन के बारे में कैसे जो इसका समर्थन करता है (जैसे फ़ायरफ़ॉक्स)? मैंने (अधिकतर सटीक रूप से) इसके साथ प्रिंट के लिए कुछ वेब पेज डिबग किए हैं।

— हालिल एगर्ज

के संभावित डुप्लिकेट कैसे आप प्रिंट करने योग्य सीएसएस डीबग करूँ?

— outis

फ़ायरफ़ॉक्स में, "डेवलपर टूलबार" को Shift + F2 के साथ खोलें, "मीडिया इम्यूलेट प्रिंट" (या "एमू" + टैब + "प्रिंट") दर्ज करें।

— मार्सेलो नूचियो

संबंधित: stackoverflow.com/questions/9540990/… , stackoverflow.com/questions/726825/…

@MarcelloNuccio यह एक उत्तर होना चाहिए। stackoverflow.com/a/28873496/1696030 को तुलना के लिए कुछ सकारात्मक वोट मिले। "डेवलपर टूलबार" एक छोटा सा भ्रामक है क्योंकि यह एक कमांड लाइन इंटरफ़ेस है।

— वोल्कर ई।

Answer 1

क्रोम के इंस्पेक्टर में इसके लिए एक विकल्प है।

1. DevTools इंस्पेक्टर खोलें (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. DevTools पैनल के ऊपरी बाएँ कोने पर स्थित टॉगल डिवाइस मोड आइकन पर क्लिक करें । (विंडोज़: Ctrl+ Shift+ M, मैक: Cmd+ Shift+ M)।
3. ब्राउज़र व्यूपोर्ट के ऊपरी दाएं कोने में More overrides आइकन पर क्लिक करें ।

4. फिर, एमुलेशन ड्रॉअर में मीडिया का चयन करें , और CSS मीडिया चेकबॉक्स चेक करें।

   

यह काम कर जाना चाहिए।

अद्यतन: मेनू DevTools में बदल गए हैं। यह अब शीर्ष दाएं कोने में "थ्री-डॉट्स" मेनू पर क्लिक करके पाया जा सकता है> अधिक उपकरण> सेटिंग सेटिंग> मीडिया का अनुकरण करें> प्रिंट करें।

स्रोत: Google DevTools पेज *

Comments

धन्यवाद, यह वही है जो मैं ढूंढ रहा था, यह नहीं मिल सका: / शॉर्टकट हालांकि अब काम नहीं करता है। मैं बस दाहिने कोने में F12 + गियर आइकन करता हूं, फिर सेटिंग ओवरराइड्स टैब के नीचे है,

— औरेलिन

दुर्भाग्य से यह 100% सटीक नहीं है :(

— maazza

Chrome में 32.0.1700.14 beta-m Aura, "Emulate CSS मीडिया [प्रिंट]" गायब है :(

— रॉकेट हज़मत

इस जवाब को ठीक करने की जरूरत है। क्रोम 48 के रूप में, प्रिंट स्टाइलशीट एमुलेटर अब "एमुलेशन" के तहत नहीं बल्कि "रेंडरिंग" के तहत है।

— छुरी

इंस्पेक्टर में थ्री-डॉट्स मेनू (दाईं ओर)> अधिक उपकरण> सेटिंग सेटिंग> मीडिया का अनुकरण करें> प्रिंट करें

— allicarn

Answer 2

मैं मान रहा हूं कि आप HTML से पीडीएफ दृष्टिकोण का उपयोग किए बिना मुद्रित विंडो का जितना संभव हो सके नियंत्रण करें ... अंतिम सीएसएस के लिए @media स्क्रीन का उपयोग करें - @media प्रिंट करें

आधुनिक ब्राउज़र आपको एक त्वरित दृश्य दे सकते हैं कि इंच और पीटीएस का उपयोग करके प्रिंट समय पर क्या होने वाला है @media query।

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

एक बार जब आपका ब्राउज़र "इंच" प्रदर्शित कर रहा होगा, तो आपको बेहतर विचार होगा कि क्या उम्मीद की जाए। इस दृष्टिकोण को प्रिंट पूर्वावलोकन विधि को समाप्त करना चाहिए। सभी प्रिंटर ptऔर inइकाइयों के साथ काम करेंगे , और @मीडिया तकनीक का उपयोग करके आप जल्दी से देख पाएंगे कि क्या होने वाला है और तदनुसार समायोजित करें। फायरबग (या समतुल्य) पूरी तरह से उस प्रक्रिया को तेज करेगा। जब आपने @media में अपने परिवर्तन जोड़े हैं, तो आपको media = "print"विशेषता का उपयोग करके लिंक किए गए CSS फ़ाइल के लिए आवश्यक सभी कोड मिल गए हैं - केवल संदर्भित फ़ाइल में @media स्क्रीन नियमों को कॉपी / पेस्ट करें।

सौभाग्य। वेब प्रिंट के लिए नहीं बनाया गया था। एक ऐसा समाधान बनाना जो आपके सभी सामग्री को वितरित करता है, जो कि ब्राउज़र में दिखाई देने वाली शैलियों के बराबर है, कई बार असंभव हो सकता है। उदाहरण के लिए, मुख्य रूप से 1280 x 1024 दर्शकों के लिए एक द्रव लेआउट हमेशा एक अच्छे और साफ 8.5 x 11 लेजर प्रिंट में आसानी से अनुवाद नहीं करता है।

शुद्धिकरण के लिए W3C संदर्भ: http://www.w3.org/TR/css3-mediaqueries/

Comments

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

— चाकल्सन

@Chuck। धन्यवाद दोस्त। अरे, मुझे एहसास हुआ कि मेरा डेमो ऑफ-लाइन था, इसलिए मैंने इसके लिए एक फील बनाया। jsfiddle.net/dNEmT

— डॉसन

Answer 3

Chrome 48 आप रेंडरिंग टैब के भीतर प्रिंट शैलियों को डीबग कर सकते हैं ।

इंस्पेक्टर और रेंडरिंग सेटिंग्स के मेनू आइकन शीर्ष दाईं ओर क्लिक करें ।

Chrome के
लिए संपादित करें 58 स्थान वेब इंस्पेक्टर> मेनू> अधिक उपकरण> प्रतिपादन में बदल गया है

Comments

Chrome 49: F12 (डेवलपर कंसोल) -> ESC (कंसोल) -> प्रतिपादन -> प्रिंट मीडिया का अनुकरण करें

— user1477388

Answer 4

Chrome v41 में, यह वहां है, लेकिन थोड़ा अलग स्थान पर है।

Comments

V53 में यह इसके बजाय रेंडरिंग टैब पर है, नीचे एमुलेट मीडिया के लिए एक चेकबॉक्स है जो एक ड्रॉपडाउन को सक्षम करेगा जिसे आप प्रिंट किए गए स्क्रीनशॉट के समान चुन सकते हैं

— जेम्स ग्रे

Answer 5

आपके HTML कोड में किसी भी मीडिया विशेषता को स्विच किए बिना आपकी प्रिंट स्टाइलशीट को डिबग करने का एक आसान तरीका है (निश्चित रूप से, जैसा कि बताया गया है, यह चौड़ाई / पृष्ठों के मुद्दे को हल नहीं करता है):

• फ़ायरफ़ॉक्स + वेब डेवलपर एक्सटेंशन का उपयोग करें।
• वेब डेवलपर मेनू में, मीडिया प्रकार / प्रिंट द्वारा सीएसएस / प्रदर्शन सीएसएस चुनें
• वेब डेवलपर मेनू पर वापस जाएं, विकल्प / पर्सिस्ट फ़ीचर चुनें

अब आप प्रिंट सीएसएस देख रहे हैं और आप अपने पृष्ठ को अनिश्चित काल के लिए पुनः लोड कर सकते हैं। एक बार काम पूरा करने के बाद, "Persist Features" को अनचेक करें और पुनः लोड करें, आपको स्क्रीन CSS दोबारा मिल जाएगी।

HTH।

Comments

प्रिंट पूर्वावलोकन की तुलना में अलग है, काफी हद तक। शायद यह मेरी सीएसएस में एक विचित्रता है। किसी भी मामले में, यह समस्या का समाधान नहीं करता है। हालांकि धन्यवाद।

— हार्टपंक

हाँ, मेरे लिए भी बिल्कुल अलग। मैंने इस jsfiddle ( jsfiddle.net/2wk6Q/3 ) का अनुसरण किया और प्रिंट पूर्वावलोकन लाल मार्जिन के साथ पृष्ठों को दिखाता है, लेकिन यह सिर्फ बिल्कुल अलग है।

— द्वितीया_

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

— एरिक jरपंजाक

Answer 6

क्रोम का यूआई फिर से v53 के रूप में अलग है।

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

ध्यान दें कि ... Chrome ब्राउज़र फलक में Dev Tools फलक में मेनू ... मेनू नहीं है।

अब रेंडरिंग सेक्शन में स्क्रॉल करें । यह अक्सर तह से नीचे होता है।

Comments

आपने अभी मुझे print.css डीबगिंग के दिनों को सहेजा है। आप कमाल के है!

— zazvorniki

Answer 7

Rflnogueira के उत्तर तक, वर्तमान क्रोम सेटिंग्स (40.0। *) नीचे दी गई तरह दिखाई देगी:

Comments

"मीडिया" टैब को पहचानने में मुझे थोड़ा समय लगा। मैं इसे "डिवाइस" टैब में ढूंढता रहा।

— लोरिन नदियों

Answer 8

media="screen"डीबग करते समय अपने ब्राउज़र में प्रिंट स्टाइलशीट दिखाएं । प्रिंट पूर्वावलोकन दृश्य सामान्य ब्राउज़िंग मोड के समान रेंडरिंग इंजन का उपयोग करता है ताकि आप उसका उपयोग करके सटीक परिणाम प्राप्त कर सकें।

Comments

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

— जिम पल्स

क्रोम पर अकेले इस सुझाव का उपयोग करते हुए प्रतिपादन काफी अलग है। काम नहीं करेगा।

— हार्टपंक

"पृष्ठ" की चौड़ाई नीचे नाखून के लिए कठिन नहीं है, यह ऊंचाई है जो वास्तव में मुश्किल है। ब्राउज़र और प्रिंटर दोनों 11in सिरदर्द में भूमिका निभाएंगे। वेब पेज निरंतर लंबाई हैं। आउटपुट डिवाइस प्रकार और ब्राउज़र की गारंटी के बिना, मुझे नहीं लगता कि आप इसे हर बार निशान पर मारेंगे। HTML से PDF दृष्टिकोण का उपयोग करना काम करेगा, लेकिन यह आपके प्रश्न के दायरे से परे है।

— डॉसन

Answer 9

2019 - अद्यतन निर्देश

1. क्रोम इंस्पेक्टर खोलें
   • से मैक => option+ command+i
   • से विंडोज =>F12

2. थोड़ा 3 डॉट्स पर क्लिक करें, customize and control devTools

3. चुनते हैं More Tools

4. चुनते हैं Rendering

5. नीचे तक स्क्रॉल करें Emulate CSS Media

6. printनीचे तीर से चुनें

Answer 10

यदि आपके पास एक प्रिंट फंक्शन है जो पृष्ठ की सामग्री को आपकी प्रिंट स्टाइल शीट के साथ एक नई विंडो में फिर से संदर्भित करता है, तो आपको यह पता चल जाएगा कि इसके कागज पर कैसा दिखना है, और आप इसे डीबग कर पाएंगे। फायरबग की पसंद के साथ भी।

इसका एक उदाहरण है कि यह कैसे जावास्क्रिप्ट / jquery के साथ किया जा सकता है

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

Comments

इस दृष्टिकोण के साथ समस्या यह है कि यदि कोई उपयोगकर्ता बस अपने ब्राउज़र में "प्रिंट ..." का चयन करता है, तो यह जावास्क्रिप्ट फ़ंक्शन कभी भी आमंत्रित नहीं किया जाएगा।

— केन लियू

आपको उपयोगकर्ता को प्रिंट फ़ंक्शन प्रदर्शित करने की आवश्यकता नहीं है, यदि आप चाहें तो आप इसे डीबगिंग उद्देश्यों के लिए उपयोग कर सकते हैं

— Blowsie

यह ब्राउज़र द्वारा पहले से ही किए गए कुछ पर एक अधिक इंजीनियर समाधान है। बस अपनी स्टाइलशीट के लिए एक media="print"और media="screen"क्रमशः का उपयोग करें और प्रिंट पूर्वावलोकन को लागू करने के लिए ब्राउज़र मेनू या कुंजी कॉम्बो का उपयोग करें। (इस मामले में यह पॉपअप खोलने से अलग नहीं है) और यदि आप सिर्फ डिबगिंग कर रहे हैं, तो media="screen"अपनी प्रिंट शैलियों पर विशेषता लागू करें जब तक कि आप डीबगिंग नहीं करते।

— ओरियन

Answer 11

DreamWeaver में एक टूलबार है जो वस्तुतः किसी भी रेंडरिंग विकल्प को दिखाता है जो आप चाहते हैं: स्क्रीन, प्रिंट, हैंडहेल्ड मीडिया, प्रोजेक्शन स्क्रीन, टीवी मीडिया, डेसिट टाइम स्टाइल शीट इत्यादि। यह मैं विशेष रूप से उपयोग करता हूं क्योंकि यह: तुरंत 1 के साथ एक पूर्वावलोकन दिखाता है। एक बटन के एकल प्रेस।

Comments

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

— हार्टपंक

पहले से ही 2011 में यह मालिकाना था, केवल-सीमित प्लेटफ़ॉर्म पर ही खरीद-फ़रोख़्त सॉफ़्टवेयर, जिसे आपको ओपन वेब डिबग करने के लिए अनुरोधित कार्यक्षमता प्राप्त करने के लिए भुगतान करने की आवश्यकता थी।

— वोल्कर ई।

Answer 12

मैं बार-बार कीपर और माउस क्लिक भेजने के लिए मैक्रोज़ का उपयोग करता हूं। विंडोज के तहत, ऑटोहॉटके एक बेहतरीन सॉफ्टवेयर है और ओएस एक्स के तहत आप ओएक्सएक्स के लिए वैकल्पिक एएचके के ऑटोमेटर प्रकार के बारे में पढ़ सकते हैं ।

विंडोज के तहत (OS X के तहत Ctrl को Cmd द्वारा प्रतिस्थापित करें) "Ctrl-s / स्विच Fx विंडो पर जहां भी यह विंडोज़ की सूची में है / Ctrl-r" 1 अप्रयुक्त कुंजी से जुड़ा हुआ है, निर्बाध कार्यों से निराशा से बचा जाता है और अंततः अपने हथियारों को बचाएगा। से RSI :)