প্রিন্ট পূর্বরূপ মোডে Chrome এর উপাদান পরিদর্শক ব্যবহার করছেন?


666

আমি একটি ওয়েবসাইট বিকাশে কাজ করছি এবং মুদ্রণ ভিউতে কাজ করা প্রয়োজন। সাধারণত যখন আমার লেআউট সমস্যা থাকে আমি ক্রোমের এলিমেন্ট ইন্সপেক্টর ব্যবহার করি। তবে এটি মুদ্রণ পূর্বরূপ মোডে বিদ্যমান নেই।

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

এই মুহুর্তে আমি কেবল মুদ্রণের প্রাকদর্শন মাধ্যমের উপর দৃষ্টি নিবদ্ধ করছি তবে সমর্থিত মিডিয়া ধরণের (যেমন সমস্ত / ব্রেইল / এমবসড / হ্যান্ডহেল্ড / মুদ্রণ / প্রজেকশন / স্ক্রিন / স্পিচ / টিটি / টেলিভিশন).


উত্তর:


1158

নোট: এই উত্তরটি, ক্রোম বিভিন্ন সংস্করণ জুড়ে দেখতে স্ক্রোল v52 , v48 , v46 , v43 এবং v42 তাদের আপডেট পরিবর্তনের সঙ্গে প্রতিটি।

Chrome v52 +:

  • বিকাশকারী সরঞ্জামগুলি খুলুন (উইন্ডোজ: F12বা Ctrl+ Shift+ I, ম্যাক: Cmd+ Opt+ I)
  • ক্লিক করুন কাস্টমাইজ ও নিয়ন্ত্রণ DevTools হ্যামবার্গার মেনু বাটন এবং পছন্দ করে নিন রেন্ডারিং সেটিংস আরো সরঞ্জামগুলির> (অথবা রেনডারিং নতুন সংস্করণে)।
  • রেন্ডারিং ট্যাবে ইমুলেট প্রিন্ট মিডিয়া চেকবাক্সটি পরীক্ষা করে মুদ্রণ মিডিয়া প্রকারটি নির্বাচন করুন

Chrome v52 +

ক্রোম ভি 48 + (দেখার জন্য অ্যালেক্স ধন্যবাদ):

  • বিকাশকারী সরঞ্জাম ( CTRLSHIFTIবা F12) খুলুন
  • বাম উপরের কোণায় টগল ডিভাইস মোড বোতামটি ক্লিক করুন ( CTRLSHIFTM)।
  • (1) মেনুতে কনসোল দেখান ক্লিক করে কনসোলটি দেখানো হয়েছে তা নিশ্চিত করুন ( ESCবিকাশকারী সরঞ্জামদণ্ডে ফোকাস থাকলে কী কী কনসোল টোগল করে ) Make
  • রেন্ডারিং ট্যাবে ইমুলেট প্রিন্ট মিডিয়া চেক করুন যা মেনুতে (2) রেন্ডারিং নির্বাচন করে খোলা যেতে পারে ।

ক্রোম ভি 48 +

ক্রোম ভি 46 +:

  • বিকাশকারী সরঞ্জাম ( CTRLSHIFTIবা F12) খুলুন
  • বাম উপরের কোণায় টগল ডিভাইস মোড বোতামটি ক্লিক করুন (1)।
  • মেনু বোতামটি ক্লিক করে (2)> কনসোল (3) দেখিয়ে বা ESCকনসোলটি টগল করার জন্য কী টিপুন (কেবলমাত্র বিকাশকারী সরঞ্জামদণ্ডের ফোকাস থাকলে কেবল কাজ করে) কনসোলটি দেখানো হয়েছে তা নিশ্চিত করুন।
  • এমুলেশন (4)> মিডিয়া (5) ট্যাবগুলি খুলুন , সিএসএস মিডিয়া চেক করুন এবং মুদ্রণ নির্বাচন করুন (3)।

Chrome v46 + সমর্থন

ক্রোম ভি 43 +:

  • দ্বিতীয় ধাপে ড্রয়ার আইকনটি পরিবর্তিত হয়েছে।

ক্রোম ভি 43 এ মুদ্রণ মিডিয়া ক্যোয়ারী অনুকরণ করুন

ক্রোম ভি 42:

  • বিকাশকারী সরঞ্জাম ( CTRLSHIFTIবা F12) খুলুন
  • বাম উপরের কোণায় টগল ডিভাইস মোড বোতামটি ক্লিক করুন (1)।
  • ড্রয়ারটি শো ড্রয়ার বোতামে ক্লিক করে (2) বা ESCড্রয়ারটি টগল করার জন্য কী টিপুন কিনা তা নিশ্চিত করুন ।
  • অনুকরণের অধীনে > মিডিয়া সিএসএস মিডিয়া পরীক্ষা করে মুদ্রণ নির্বাচন করুন (3)।

ক্রোম ভি 42 এ মুদ্রণ মিডিয়া ক্যোয়ারী অনুকরণ করুন


14
আমি এটি নিশ্চিত করতে পারি তাই আমি এটি অনুমোদিত উত্তরটি তৈরি করলাম। আমি নিশ্চিত নই যে তারা কেন প্রতি কয়েকটি রিলিজে এটি চালিয়ে যাওয়ার জন্য জোর দিয়ে থাকে।
ডেভিড স্টাইনমেটেজে

8
এটি ক্রোম 48 এ পাওয়া গেছে তবে তারা এটিকে আবার সরিয়ে নিয়েছে: ড্রয়ারে "রেন্ডারিং" এ যান, "ইমুলেট প্রিন্ট মিডিয়া" পরীক্ষা করুন।
ওলেমাক

7
এই ঘন ঘন পরিবর্তনগুলি হ'ল গুগল থেকে এখনও অবধি বেরিয়ে আসতে দেখলাম! আমার সময় এর অপচয়।
ইস্পির

8
দুর্ভাগ্যক্রমে এটি প্রিন্ট পূর্বরূপ দেখায় একই জিনিসটি সর্বদা অনুকরণ করে না, তাই ডিবাগিংয়ের জন্য এত দুর্দান্ত নয়। সাধারণ লেআউট এবং শৈলীগুলি কী তা দেখার জন্য এটি ভাল।
কনফিউজিং

18
এই 'মুদ্রণ' এমুলেটর সম্পূর্ণ অকেজো। এটি পৃষ্ঠাটি যথাযথভাবে অনুকরণ করে না, যেমনটি আপনি ব্রাউজারে যা দেখেন তা মুদ্রণ পূর্বরূপে যা দেখায় তেমন কিছুই হবে না। কারও কি কাজের সমাধান আছে?
ইয়ান এস

168

ক্রোম 32 35+ এ পরিবর্তিত হয়েছে

(ক্রোম 35+ এ "এমুলেশন" ট্যাব ডিফল্টরূপে উপস্থিত থাকে Also এছাড়াও, কোনও প্রাথমিক ট্যাব থেকে কনসোল পাওয়া যায়))

  1. ডেভটুলগুলিতে, সেটিংস-> ওভাররাইডগুলিতে যান
  2. "কনসোল ড্রয়ারে এমুলেশন ভিউ দেখান" সক্ষম করুন
  3. সেটিংস বন্ধ করুন, 'উপাদানসমূহ' ট্যাবে যান
  4. Escকনসোল আনতে হিট করুন
  5. ট্যাব "এমুলেশন" চয়ন করুন, "স্ক্রিন" ক্লিক করুন
  6. "সিএসএস মিডিয়া" এ স্ক্রোল ডাউন করুন, "মুদ্রণ" নির্বাচন করুন

এই বিকল্পটি (এখনও?) কনসোল ট্যাবে উপলব্ধ নেই।

ওভাররাইড সক্ষম করুন


1
এই আপডেটটি প্রতিফলিত করতে, আমি এগিয়ে গিয়েছি এবং এটি এখন সঠিক উত্তর হিসাবে চিহ্নিত করেছি।
ডেভিড স্টাইনমেটজে

3
ওভাররাইড ট্যাবটি ক্রোম 36-এ আর নেই that (কখন পরিবর্তন হয়েছিল তা আমি জানি না)। এমুলেশন ট্যাব ডিফল্টরূপে উপস্থিত থাকে।
ইব্রুচেজ

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

1
আমি কেবল এটিই খুঁজে পেয়েছি, এখন আমি এটি ব্যবহার করছি, এটি ক্রোম প্রিন্ট করে আসলে এটি নয়। এটি বুটস্ট্র্যাপ ৩.x সহ অত্যন্ত স্পষ্ট যেখানে মিডিয়া মিডিয়া গ্রিড-এমডি ব্যবহার করবে তবে প্রিন্ট পূর্বরূপ গ্রিড-
এসএম

3
ক্রোম 39 এটি "মিডিয়া" এর অধীনে। আপনাকে প্রথমে ডিভটোলস শীর্ষ বারের বামদিকে ছোট ফোন আইকনে ক্লিক করে ডিভাইস এমুলেশন সক্ষম করতে হবে এবং তারপরে ডিভাইস এমুলেটরটির উপরের ডানদিকে 3 টি ডট ক্লিক করুন।
ড্যানি স্ট্যাপল

73

ক্রোম 32 সাল থেকে আপনার কাছে ড্রয়ার ট্যাব বিভাগে CSS mediaবিকল্প রয়েছে ।ScreenEmulation

এটি কেবল সক্ষম করুন, printটার্গেট মিডিয়া টাইপ হিসাবে নির্বাচন করুন এবং দেখুন - আপনার পৃষ্ঠাটি যেভাবে প্রিন্ট করা হবে তা প্রায় [প্রায়শই] রেন্ডার করা হয়েছে।

Escড্রয়ারটি দৃশ্যমান না হলে এটি আনতে ব্যবহার করুন ।


আমি আশা করছিলাম যে এটি এর চেয়ে সহজ হবে তবে আমি মনে করি এটি আপাতত করতে হবে। এটি অবশেষে যদি স্বয়ংক্রিয়ভাবে এটির একটির মধ্যে তৈরি হয়ে যায়।
ডেভিড স্টাইনমেটেজে

আমি যখন সুযোগ পাব তখন আমাকে চেষ্টা করে দেখতে হবে। আমি ততক্ষণে @ জোন-ওয়াইওয়াইসি এর পদ্ধতিটি ধরে রাখতে পারি।
ডেভিড স্টাইনমেটেজে

আমি ম্যাকের উপর 28 সংস্করণ ব্যবহার করছি এবং এই বিকল্পটি দেখছি না ... অন্য কারও এই সমস্যা আছে?
অ্যারন হিল

2
অ্যারোনহিল আমি ম্যাকের ২৮ সংস্করণ ব্যবহার করছি এবং এতে কোনও সমস্যা নেই। যদিও সম্ভবত আপনি সেটিংস সংলাপে প্রবেশ করেন নি। আপনি এলিমেন্ট ইন্সপেক্টরটির নীচে ডানদিকে কোণার গিয়ার আইকনটি ক্লিক করে এটি সন্ধান করতে পারেন।
ডেভিড স্টাইনমেজ্জে

2
এই উত্তরটি এখন পুরানো।
ফ্লাইম

23

ক্রোম 48 (এবং সম্ভবত কয়েকটি সংস্করণ আগে) হিসাবে, ফাংশনটি আবার সরে গেছে বলে মনে হচ্ছে:

প্রথম কয়েকটি পদক্ষেপ অপরিবর্তিত:

  1. F12বিকাশকারী সরঞ্জামগুলি আনতে টিপুন

  2. ESCকনসোলটি খুলতে টিপুন

পূর্ববর্তী উত্তর অনুসারে, সেটিংটি তখন "এমুলেশন" ট্যাবের অধীনে পাওয়া যাবে। নীচের চিত্রগুলিতে দেখানো হয়েছে, এটি এখন "রেন্ডারিং" ট্যাবে সরানো হয়েছে, যা "কনসোল" ট্যাবের বাম দিকে তিনটি বিন্দুতে ক্লিক করে আনা যেতে পারে।

ট্যাব নির্বাচন

নির্বাচন সেট করা হচ্ছে



14

ক্রম 48+ হিসাবে, আপনি নিম্নলিখিত পদক্ষেপগুলির মাধ্যমে মুদ্রণ পূর্বরূপ অ্যাক্সেস করতে পারেন:

  1. দেব সরঞ্জামগুলি খুলুন - Ctrl/Cmd+ Shift+ Iবা পৃষ্ঠায় ডান ক্লিক করুন এবং 'পরিদর্শন করুন' নির্বাচন করুন।

  2. Escঅতিরিক্ত ড্রয়ার খুলতে হিট করুন ।

  3. যদি 'রেন্ডারিং' ইতিমধ্যে প্রদর্শিত হচ্ছে না, 3 ডট কাবাব ক্লিক করুন এবং 'রেন্ডারিং' চয়ন করুন।

  4. 'ইমুলেট প্রিন্ট মিডিয়া' চেকবক্সটি পরীক্ষা করুন।

সেখান থেকে ক্রোম আপনাকে আপনার পৃষ্ঠার একটি মুদ্রণ সংস্করণ দেখিয়ে দেবে এবং আপনি ব্রাউজার সংস্করণটির মতো উপাদানগুলি এবং সমস্যা সমাধান করতে পারবেন।

দেব সরঞ্জামগুলিতে ক্রোম 49+ প্রিন্ট পূর্বরূপ বিকল্পের চিত্র


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

1
সাধারণ ডেভ সরঞ্জামগুলির তথ্যের জন্য আমি যে উত্সটি পেয়েছি তা হ'ল ডেভেলপার্স / ডাব্লু / টোলস / ক্রোম- দেবতুলস /?hl=en । আমি এই ভিডিওর সর্বশেষ সংস্করণটির আপডেটগুলি দেখে সত্যিই আনন্দ পেয়েছি: youtube.com/watch?v=dJR-n8szgBc
নীলসিএনস

7

যদি আপনি গুগল ক্রোমে পিডিএফ হিসাবে প্রিন্ট ব্যবহার করে আপনার সিএসএস ডিবাগ করছেন এবং আপনার সিএসএস উপাদানগুলির পটভূমি রঙগুলি প্রদর্শিত হচ্ছে না, তবে নিশ্চিত করুন যে 'ব্যাকগ্রাউন্ড গ্রাফিক্স' চেকবক্সটি টিক দেওয়া আছে। আমি আমার সিএসএস ডিবাগ করতে প্রায় 30 মিনিট সময় কাটিয়েছি এবং ভেবেছিলাম কী কারণে আমার সিএসএস পটভূমি উপেক্ষা করা হচ্ছে।

গুগল ক্রোম প্রিন্টের পটভূমির রঙ উপেক্ষা করা হয়েছে


6

একটি ম্যাকের Chrome v51 এর অধীনে, আমি উপরের ডানদিকে ক্লিক করে রেন্ডারিং সেটিংস পেয়েছি, আরও সরঞ্জামগুলি> রেন্ডারিং সেটিংস এবং উইন্ডোটির নীচে প্রদত্ত বিকল্পগুলিতে ইমুলেট মিডিয়া বোতামটি পরীক্ষা করে।

Chrome v51 ম্যাক এমুলেট মিডিয়া নির্বাচক নীচে উপস্থিত হয়

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


আমি "এমুলেট মিডিয়াতে" মুদ্রণ বা পর্দা নির্বাচন করি না কেন, এটি এখনও মুদ্রণ স্টাইলশীট দিয়ে মুদ্রণ করে। পরিবর্তে আমি একটি পূর্ণ পৃষ্ঠার স্ক্রিনশট এক্সটেনশন ব্যবহার করে শেষ করেছি। chrome.google.com/webstore/detail/full-page-screen-capture/…
নিক্নাহ

4

ক্রোম ভি 67 (ম্যাক):

  1. Cmd+opt+jদেব সরঞ্জাম খুলতে চেপে ধরুন
  2. ...ডান হাতের দিকে ক্লিক করুন , এবং চয়ন করুন: আরও সরঞ্জাম >> রেন্ডারিং
  3. যখন রেন্ডারিং উইন্ডোটি স্ক্রিনের নীচে প্রদর্শিত হবে, সিএসএস মিডিয়া বিভাগ অনুকরণ করুন এবং ড্রপডাউন থেকে "স্ক্রিন" চয়ন করুন।
  4. "ফাইল >> মুদ্রণ" এ যান এবং মুদ্রণ করতে চান এমন দৃশ্যটি আপনার দেখতে হবে।

ম্যাকে ক্রোম ভি 67 এর জন্য উপরের বর্ণনার চিত্রগুলি:

রেন্ডারিং ট্যাবটি কোথায় পাবেন: ডান ...পাশের দিকে ক্লিক করুন এবং চয়ন করুন: আরও সরঞ্জাম >> রেন্ডারিং

স্ক্রিনশট 1

কীভাবে মুদ্রণের জন্য "স্ক্রিন" ভিউ পাবেন: রেন্ডারিং উইন্ডোটি যখন স্ক্রিনের নীচে প্রদর্শিত হবে, তখন সিএসএস মিডিয়া বিভাগ অনুকরণ করুন এবং ড্রপডাউন থেকে "স্ক্রিন" নির্বাচন করুন।

স্ক্রিনশট 2

আশা করি এটা সাহায্য করবে.


4

শর্টকাট উপলভ্য, দ্রুততম উপায়টি হল

  1. বিকাশকারী সরঞ্জাম খুলুন

    • উইন্ডোজ: F12বা Ctrl+ Shift+I
    • ম্যাক: Cmd+ Opt+I
  2. কমান্ড মেনু খুলুন

    • উইন্ডোজ: Ctrl+ Shift+P
    • ম্যাক: Cmd+ Shift+P
  3. টাইপ করুন printএবং নির্বাচন করুন অনুকরণ করা সিএসএস প্রিন্ট মিডিয়ার টাইপ প্রসঙ্গ মেনু থেকে

    কমান্ড মেনু মাধ্যমে মিডিয়া টাইপ এমুলেশন পরিবর্তন করুন

Lmeurs দ্বারা দুর্দান্ত এবং বর্তমানে সর্বাধিক উন্নত উত্তরের দিকে তাকানো , আমি মনে করি সময়ের সাথে সাথে এই সমাধানটিও স্থিতিশীল থাকতে পারে।


1

ক্রোম ভি 50:

উপায় 1:

  1. মেনু> আরও সরঞ্জাম> রেন্ডারিং সেটিংস (চিত্র দেখুন)
  2. ডাউন: রেন্ডারিং ট্যাব> এমুলেট মিডিয়া "মুদ্রণ"

উপায় 2:

  1. কনসোল খুলুন [এসএসসি]
  2. কনসোল মেনু> উপস্থাপনা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.