ডিবাগিং মুদ্রণ শৈলীপত্রের জন্য পরামর্শ?

Question

আমি সম্প্রতি একটি ওয়েবসাইটের জন্য একটি মুদ্রণ স্টাইলশীট নিয়ে কাজ করছি এবং আমি বুঝতে পেরেছিলাম যে এটির টুইট করার কার্যকর উপায়গুলির জন্য আমার ক্ষতি হয়েছিল। অন-স্ক্রিন লেআউটে কাজ করার জন্য একটি পুনরায় লোড চক্র থাকা এক জিনিস:

• কোড পরিবর্তন করুন
• কমান্ড-ট্যাব
• রিলোড

আপনি মুদ্রণের চেষ্টা করার সময় সেই পুরো প্রক্রিয়াটি আরও বেশি কষ্টকর হয়ে ওঠে:

• কোড পরিবর্তন করুন
• কমান্ড-ট্যাব
• রিলোড
• ছাপা
• প্রিন্ট-প্রিভিউ চিত্রে স্কুইন্ট
• আরও পরিদর্শন করার জন্য পূর্বরূপে পিডিএফ খুলুন

আমি কি এখানে কোন সরঞ্জাম মিস করছি? ওয়েবকিটের পরিদর্শকের কি "ভান করে এটি পেজড মিডিয়া" চেকবক্স আছে? ফায়ারব্যাগ ( কাঁপুনি ) করতে পারে এমন কিছু জাদু আছে কি?

Comments

এটি সমর্থনকারী কোনও ব্রাউজারের "মুদ্রণ প্রাকদর্শন" ফাংশন সম্পর্কে কীভাবে (যেমন ফায়ারফক্স)? আমি (বেশিরভাগ নির্ভুলভাবে) এর সাথে মুদ্রণের জন্য কয়েকটি ওয়েব পৃষ্ঠাগুলি ডিবাগ করেছি।

— হালিল Özgür

আপনি কীভাবে প্রিন্টযোগ্য সিএসএস ডিবাগ করবেন এর

— শে

ফায়ারফক্সে, শিফট + এফ 2 দিয়ে "বিকাশকারী সরঞ্জামদণ্ড" খুলুন, "মিডিয়া এমুলেট প্রিন্ট" (বা "ইমু" + ট্যাব + "মুদ্রণ") লিখুন, লিখুন।

— মার্সেলো নুসিও 13

সম্পর্কিত: stackoverflow.com/questions/9540990/... , stackoverflow.com/questions/726825/...

এই টুইটটি উত্তর হওয়া উচিত। stackoverflow.com/a/28873496/1696030 তুলনার জন্য বেশ কিছু ইতিবাচক ভোট পেয়েছে। কমান্ড লাইন ইন্টারফেস হওয়ায় "বিকাশকারী সরঞ্জামদণ্ড" কিছুটা বিভ্রান্তিকর।

— ভোলকার ই।

Answer 1

ক্রোমের পরিদর্শকটিতে এর জন্য একটি বিকল্প রয়েছে।

1. দেবটুলস পরিদর্শক খুলুন (ম্যাক: Cmd+ Shift+ C, উইন্ডোজ: Ctrl+ Shift+ C)
2. দেবটুলস প্যানেলের উপরের বাম কোণে অবস্থিত টগল ডিভাইস মোড আইকনে ক্লিক করুন । (উইন্ডোজ: Ctrl+ Shift+ M, ম্যাক: Cmd+ Shift+ M)।
3. ডেভটোলস ড্রয়ারটি খুলতে ব্রাউজার ভিউপোর্টের উপরের ডানদিকে কোণায় থাকা ওভাররাইড আইকনে ক্লিক করুন ।

4. এর পরে, নির্বাচন মিডিয়া এমুলেশন ড্রয়ারে, এবং চেক সিএসএস মিডিয়া চেকবক্স নেই।

   

এই কৌতুক করতে হবে।

আপডেট: মেনুগুলি ডিভলগুলিতে পরিবর্তিত হয়েছে। এটি এখন উপরের ডান কোণায় "তিন-বিন্দু" মেনুতে ক্লিক করে পাওয়া যাবে> আরও সরঞ্জাম> রেন্ডারিং সেটিংস> মিডিয়া এমুলেট করে> মুদ্রণ করুন।

সূত্র: গুগল ডেভটুলস পৃষ্ঠা *

Comments

ধন্যবাদ, আমি যা খুঁজছিলাম, এটি এটি খুঁজে পেল না: / শর্টকাটটি যদিও এখনও কাজ করে না। আমি কেবল নীচের ডানদিকে কোণায় F12 + গিয়ার আইকনটি করি, তারপরে সেটিংসটি ওভাররাইড ট্যাবের অধীনে রয়েছে,

— অরেলিন

দুর্ভাগ্যক্রমে এটি 100% সঠিক নয় :(

— maazza

ক্রোমে 32.0.1700.14 beta-m Aura, "এমুলেট সিএসএস মিডিয়া [মুদ্রণ]" অনুপস্থিত :(

— রকেট হাজমত

এই উত্তরটি সংশোধন করা দরকার। ক্রোম 48 হিসাবে, মুদ্রণ স্টাইলশীট এমুলেটর আর "অনুকরণ" এর অধীনে নয় তবে "রেন্ডারিং" এর অধীনে।

— ছারভে

পরিদর্শকটিতে থ্রি-ডটস মেনু (ডান দিকের)> আরও সরঞ্জাম> রেন্ডারিং সেটিংস> মিডিয়া

— এমুলেট করুন

Answer 2

আমি ধরে নিচ্ছি আপনি পিডিএফ পদ্ধতির কোনও HTML ব্যবহার না করে মুদ্রিত উইন্ডোটির যথাসম্ভব নিয়ন্ত্রণ চান ... ডিবাগ করতে @ মিডিয়া স্ক্রিন ব্যবহার করুন - ফাইনাল সিএসএসের জন্য @ মিডিয়া প্রিন্ট

আধুনিক ব্রাউজারগুলি প্রিন্টের সময় কী হতে চলেছে তার জন্য একটি ইন ইঞ্চি এবং পিটিএস ব্যবহার করে আপনাকে দ্রুত দর্শন দিতে পারে @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 */
 ...
}

আপনার ব্রাউজারটি একবার "ইঞ্চি" প্রদর্শন করার পরে আপনি কী আশা করবেন সে সম্পর্কে আরও ভাল ধারণা পাবেন idea এই পদ্ধতির মুদ্রণ পূর্বরূপ পদ্ধতিটি বাদ দিয়ে সমস্ত হওয়া উচিত। সমস্ত মুদ্রকগুলি ptএবং inইউনিটগুলির সাথে কাজ করবে এবং @ মিডিয়া কৌশলটি আপনাকে কী ঘটছে তা দ্রুত দেখার অনুমতি এবং তদনুসারে সামঞ্জস্য করবে। ফায়ারব্যাগ (বা সমতুল্য) একেবারে প্রক্রিয়াটি ত্বরান্বিত করবে। আপনি যখন @ মিডিয়াতে আপনার পরিবর্তনগুলি যুক্ত করেছেন, তখন আপনাকে একটি লিঙ্কযুক্ত সিএসএস ফাইলের জন্য প্রয়োজনীয় সমস্ত কোডটি পেয়েছি যা media = "print"গুণাবলী ব্যবহার করে - কেবলমাত্র রেফারেন্সযুক্ত ফাইলে @ মিডিয়া স্ক্রিনের নিয়মগুলি কপি / পেস্ট করুন।

শুভকামনা। ওয়েবটি মুদ্রণের জন্য নির্মিত হয়নি। এমন একটি সমাধান তৈরি করা যা আপনার সমস্ত সামগ্রী সরবরাহ করে, ব্রাউজারে যা দেখেছে তার সমান শৈলীগুলি কখনও কখনও অসম্ভব হতে পারে। উদাহরণস্বরূপ, প্রধানত 1280 x 1024 শ্রোতার জন্য একটি তরল বিন্যাস সর্বদা একটি সুন্দর এবং ঝরঝরে 8.5 x 11 লেজার প্রিন্টে সহজেই অনুবাদ করে না।

Purusal জন্য ডাব্লু 3 সি রেফারেন্স: http://www.w3.org/TR/css3-mediaqueries/

Comments

এই মন্তব্যটি বেশ চালাক বলে কেবল মন্তব্য করতে চেয়েছিলেন। মুদ্রণ প্রাকদর্শন ফাংশনটি ব্যবহার করার চেয়ে উইন্ডোটির প্রিন্ট স্টাইলগুলিকে "টগল" করার জন্য সামান্য আকার পরিবর্তন করা আরও সহজ। আপনার এখনও এখনও কিছুটা IE সামঞ্জস্য এবং এর জন্য করতে হয়, এটি মুদ্রণ শৈলীর প্রাথমিক পুনরাবৃত্তির জন্য দুর্দান্ত।

— চকনসেলসন

@Chuck। ধন্যবাদ মানুষ. আরে, আমি বুঝতে পেরেছি যে আমার ডেমো অফ-লাইন, তাই আমি এটির জন্য একটি ঝাঁকুনি তৈরি করেছি। jsfiddle.net/dNEmT

— ডসন

Answer 3

ক্রোম 48 আপনি রেন্ডারিং ট্যাবটির মধ্যে মুদ্রণ শৈলীগুলি ডিবাগ করতে পারেন ।

পরিদর্শক এবং রেন্ডারিং সেটিংসের উপরের ডানদিকে মেনু আইকনটিতে ক্লিক করুন ।

ক্রোম 58 এর
জন্য সম্পাদনা করুন অবস্থানটি ওয়েব পরিদর্শক> মেনু> আরও সরঞ্জাম> রেন্ডারিংয়ে পরিবর্তিত হয়েছে

Comments

ক্রোম 49: F12 (বিকাশকারী কনসোল) -> ESC (কনসোল) -> রেন্ডারিং -> মুদ্রণ মিডিয়া

— অনুকরণ করুন

Answer 4

ক্রোম ভি 41 এ, এটি রয়েছে তবে কিছুটা আলাদা স্পটে।

Comments

পরিবর্তে v53 এ এটি রেন্ডারিং ট্যাবে রয়েছে, নীচে নীচের দিকে এমুলেট মিডিয়াটির জন্য একটি চেকবক্স রয়েছে যা আপনি যে ড্রপডাউনটিকে প্রিন্ট করতে পারেন তা প্রদত্ত স্ক্রিনশটের অনুরূপ সক্ষম করবে

— জেমস গ্রে

Answer 5

আপনার এইচটিএমএল কোডে কোনও মিডিয়া বৈশিষ্ট্য পরিবর্তন না করেই আপনার মুদ্রণ স্টাইলশিটটি ডিবাগ করার একটি সহজ উপায় রয়েছে (অবশ্যই উল্লেখ করা হিসাবে এটি প্রস্থ / পৃষ্ঠাগুলির ইস্যু সমাধান করে না):

• ফায়ারফক্স + ওয়েব বিকাশকারী এক্সটেনশন ব্যবহার করুন।
• ওয়েব বিকাশকারী মেনুতে, মিডিয়া টাইপ / প্রিন্টের মাধ্যমে সিএসএস / ডিসপ্লে সিএসএস চয়ন করুন
• ওয়েব বিকাশকারী মেনুতে ফিরে যান, বিকল্পগুলি / বিদ্যমান বৈশিষ্ট্যগুলি চয়ন করুন

এখন আপনি মুদ্রণ সিএসএস দেখছেন এবং আপনি আপনার পৃষ্ঠা অনির্দিষ্টকালের জন্য পুনরায় লোড করতে পারেন। আপনার কাজ শেষ হয়ে গেলে, "পার্সিস্ট বৈশিষ্ট্যগুলি" আনচেক করুন এবং পুনরায় লোড করুন, আপনি আবার স্ক্রিন সিএসএস পাবেন।

আছে HTH।

Comments

যথেষ্ট পরিমাণে মুদ্রণ পূর্বরূপের চেয়ে আলাদা উপস্থাপন করে। সম্ভবত এটি আমার সিএসএসের এক কোলাহল। যে কোনও ক্ষেত্রে, এটি সমস্যার সমাধান করে না। ধন্যবাদ যদিও.

— হার্টপ্যাঙ্ক

হ্যাঁ, আমার জন্যও সম্পূর্ণ আলাদা। আমি এই jsfiddle ( jsfiddle.net/2wk6Q/3 ) অনুসরণ করেছি এবং মুদ্রণ পূর্বরূপগুলি লাল মার্জিনযুক্ত পৃষ্ঠাগুলি দেখায়, তবে এটি সম্পূর্ণ আলাদা।

— দ্বৈততা

আমাকে অবশ্যই বলতে হবে যে এই "workaround" আমার পক্ষে সবচেয়ে ভাল কাজ করে। সম্ভবত আমি ভাগ্যবান এবং কেন দেশীয় মুদ্রণ স্ক্রিন এবং ওয়েব বিকাশকারীদের প্রিন্ট স্ক্রিনের মধ্যে কেবলমাত্র ছোট পার্থক্য রয়েছে তবে এটি আমাকে ফাঁকাগুলি কেন দেখা দেয় এবং সবচেয়ে গুরুত্বপূর্ণ তা সুনির্দিষ্টভাবে সাহায্য করেছিল - আমি ফায়ারব্যাগের সাহায্যে কোডটি পেয়ে যেতে পারি এবং দেখতে কী চলছে অন

— এরিক perpnjak

Answer 6

ক্রোমের ইউআই আবার ভি 5 হিসাবে আলাদা।

আমার প্রায়শই এই বৈশিষ্ট্যটি ব্যবহার করার দরকার নেই, তবে যখনই আমি করি, শেষ বারের থেকে এটি সন্ধানের জন্য চক্রগুলি পোড়ানোর পরে ক্রোম দলটি কোথায় স্থানান্তরিত হয়েছে তা নির্ধারণ করতে আমার চিরতরে লাগে।

লক্ষ্য করুন এটি ডিভাইস সরঞ্জামে থাকা ... মেনুটি ক্রোম ব্রাউজার ফলকের ... মেনুতে নয় ।

এখন রেন্ডারিং বিভাগে নিচে স্ক্রোল করুন । এটি প্রায়শই ভাঁজের নীচে।

Comments

আপনি সবেমাত্র আমাকে মুদ্রণ। CSS ডিবাগিংয়ের দিনগুলি সংরক্ষণ করেছেন saved তুমি দারুন!

— zazvorniki

Answer 7

Rflnogueira দ্বারা উত্তর অনুসরণ করে, বর্তমান ক্রোম সেটিংস (40.0। *) নীচের মত দেখাবে:

Comments

"মিডিয়া" ট্যাবটি সনাক্ত করতে আমার একটু সময় লেগেছে। আমি এটি "ডিভাইস" ট্যাবে অনুসন্ধান করতে থাকি।

— লরিন নদী

Answer 8

media="screen"ডিবাগ করার সময় কেবলমাত্র আপনার ব্রাউজারে মুদ্রণের স্টাইলশিটটি দেখান । মুদ্রণ পূর্বরূপ ভিউটি সাধারণ ব্রাউজিং মোডের মতো একই রেন্ডারিং ইঞ্জিন ব্যবহার করে যাতে আপনি এটি ব্যবহার করে সঠিক ফলাফল পেতে পারেন।

Comments

সাধারণ ব্রাউজিং মোড ব্যতীত পৃষ্ঠাগুলি নেই, সুতরাং সামগ্রী কীভাবে প্রবাহিত হবে তা আমার কোনও ধারণা নেই। সাধারণ ব্রাউজিং মোডের একটি নির্দিষ্ট সংখ্যক পিক্সেলের প্রস্থ থাকে, যখন কোনও পৃষ্ঠার একটি নির্দিষ্ট সংখ্যক ইঞ্চি বা সেন্টিমিটার প্রস্থ থাকে। স্ক্রিন এবং মুদ্রণের মধ্যে মৌলিক প্রয়োগ-স্বতন্ত্র পার্থক্য রয়েছে। তাদের মধ্যে ডিবাগিংয়ের পরে আমি যা করছি।

— জিম পালস

ক্রোমে একাই এই পরামর্শ ব্যবহার করে রেন্ডারিং একেবারে আলাদা। কাজ হবে না।

— হার্টপঙ্ক

"পৃষ্ঠা" প্রস্থটি পেরেক করা শক্ত নয়, এটি উচ্চতা যা সত্যই কঠিন। ব্রাউজার এবং মুদ্রক উভয়ই 11 জনের মাথা ব্যাথাতে ভূমিকা রাখবে। ওয়েব পৃষ্ঠাগুলি অবিচ্ছিন্ন দৈর্ঘ্য। আউটপুট ডিভাইসের ধরণ এবং ব্রাউজারের গ্যারান্টি ব্যতীত আমি মনে করি না আপনি প্রতিবারই চিহ্নটিতে আঘাত করবেন। পিডিএফ পদ্ধতির জন্য এইচটিএমএল ব্যবহার করা কার্যকর হবে তবে এটি আপনার প্রশ্নের ক্ষেত্রের বাইরে।

— ডসন

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

এই পদ্ধতির সাথে সমস্যাটি হ'ল কোনও ব্যবহারকারী যদি তাদের ব্রাউজারে কেবল "মুদ্রণ ..." নির্বাচন করেন তবে এই জাভাস্ক্রিপ্ট ফাংশনটি কখনই প্রার্থিত হবে না।

— কেন লিউ

আপনার মুদ্রণ ফাংশনটি ব্যবহারকারীর কাছে প্রদর্শন করার দরকার নেই, আপনি চাইলে এটি সহজেই ডিবাগিং উদ্দেশ্যে ব্যবহার করতে পারেন

— ব্লোসি

এটি ব্রাউজার ইতিমধ্যে যা কিছু করে একটি ওভার ইঞ্জিনিয়ারড সমাধান। আপনার স্টাইলশিটগুলির জন্য কেবলমাত্র media="print"এবং media="screen"যথাক্রমে একটি ব্যবহার করুন এবং মুদ্রণ পূর্বরূপটি চাওয়ার জন্য ব্রাউজার মেনু বা কী কম্বো ব্যবহার করুন। (এক্ষেত্রে এটি পপআপ খোলার চেয়ে আলাদা নয়) এবং আপনি যদি কেবল ডিবাগিং media="screen"করেন তবে আপনার মুদ্রণ শৈলীর বৈশিষ্ট্যটি প্রয়োগ করুন যতক্ষণ না আপনি ডিবাগিং না করেন।

— ওড়িয়ান

Answer 11

: স্ক্রীনে, মুদ্রণ, হ্যান্ডহেল্ড মিডিয়ার অভিক্ষেপ পর্দা, টিভি মিডিয়া, desitn সময় স্টাইল শীট, ইত্যাদি এই আমি কি ব্যবহার বিশেষত কারণ হল: ড্রিমউইভার সেখানে একটি টুলবার যে শো কার্যত যে কোন রেন্ডারিং বিকল্পটি চাই অবিলম্বে 1 একটি প্রাকদর্শন দেখায় একটি বোতামের একক প্রেস।

Comments

জেনে রাখা ভাল তবে এটির জন্য আমাদের যে বিকাশ হয় তার চেয়ে আলাদা রেন্ডারিং ইঞ্জিন ব্যবহার করা দরকার এবং এখনও পুনরায় লোডের চেয়ে আরও বেশি প্রয়োজন। ধন্যবাদ যদিও.

— হার্টপঙ্ক

ইতিমধ্যে 2011 সালে এটি মালিকানাধীন ছিল, কেবলমাত্র সীমাবদ্ধ প্ল্যাটফর্মগুলিতে ক্রয়-কেবলমাত্র সফ্টওয়্যার, যা আপনাকে ওপেন ওয়েল ডিবাগ করার জন্য অনুরোধ করা কার্যকারিতাটি পাওয়ার জন্য আপনাকে অর্থ প্রদান করতে হবে।

— ভোলকার ই।

Answer 12

আমি বারবার কীপ্রেস এবং মাউস ক্লিকগুলি প্রেরণে ম্যাক্রোগুলি ব্যবহার করি। উইন্ডোজের অধীনে অটোহটকি একটি দুর্দান্ত সফ্টওয়্যার এবং ওএস এক্স এর অধীনে আপনি ওএসএক্সের জন্য বিকল্প এএইচকে অটোমেটার সাজানোর বিষয়ে পড়তে পারেন ।

উইন্ডোজের অধীনে (ওএস এক্স এর অধীনে সিএমডি দ্বারা সিটিআরএল প্রতিস্থাপন করুন) "উইন্ডোজ খোলা তালিকার তালিকায় যেখানেই সিআরটিএল / স্যুইচ করুন / সিআরটিএল-র 1 টি অব্যবহৃত কী" উদ্বেগজনক কাজগুলি থেকে হতাশাকে এড়িয়ে চলে এবং শেষ পর্যন্ত আমার বাহুগুলি সংরক্ষণ করবে আরএসআই থেকে :)