স্ক্রিনশট টুলটি যেকোনো ওয়েবপেজের উচ্চ-মানের ছবি দুটি মোডে ক্যাপচার করে: দৃশ্যমান এলাকা (ব্রাউজার উইন্ডোতে আপনি যা দেখছেন) অথবা সম্পূর্ণ পেজ (ওপর থেকে নিচ পর্যন্ত পুরো পেজ, স্ক্রিনের নিচের অংশসহ)। স্ক্রিনশটগুলো হাই-রেজোলিউশন PNG ফাইল হিসেবে সেভ হয় এবং তাৎক্ষণিকভাবে আপনার ডিভাইসে ডাউনলোড হয় — কোনো ক্লাউড আপলোড, অ্যাকাউন্ট বা অপেক্ষার প্রয়োজন নেই।
ব্রাউজারের ডিফল্ট স্ক্রিনশট (OS-লেভেল টুল যেমন Cmd+Shift+4 বা Snipping Tool ব্যবহার করে) আপনার সম্পূর্ণ স্ক্রিন ক্যাপচার করে, যার মধ্যে ব্রাউজার ক্রোম, টুলবার এবং অন্যান্য উইন্ডো থাকে। এগুলো স্ক্রিনের বাইরের (below the fold) কন্টেন্ট ক্যাপচার করতে পারে না। DevSuite-এর স্ক্রিনশট টুল এই উভয় সমস্যার সমাধান করে — এটি কেবল ওয়েবপেজের কন্টেন্ট ক্যাপচার করে (কোনো ব্রাউজার UI নয়) এবং একটি নিরবচ্ছিন্ন সম্পূর্ণ-পেজ ছবি তৈরি করতে পুরো পেজটি স্ক্রল করতে পারে। দৃশ্যমান এলাকা মোডটি পিক্সেল-নিখুঁত নির্ভুলতার জন্য Chrome-এর নেটিভ ক্যাপচার API ব্যবহার করে। সম্পূর্ণ পেজ মোডটি স্বয়ংক্রিয়ভাবে পেজ স্ক্রল করে, প্রতিটি ভিউপোর্ট টাইল ক্যাপচার করে এবং সেগুলোকে একটি একক ছবিতে যুক্ত করে। আউটপুটটি হল একটি ফুল-রেজোলিউশন PNG (আপনার ডিসপ্লের পিক্সেল রেশিও অনুযায়ী), তাই রেটিনা এবং হাই-DPI ডিসপ্লেতেও স্ক্রিনশটগুলো পরিষ্কার দেখায়।
ব্রাউজার ভিউপোর্টে ঠিক যা দেখা যাচ্ছে তা ক্যাপচার করুন — ব্যবহারকারী কন্টেন্টের যে সুনির্দিষ্ট অংশটি দেখছেন। কোনো ব্রাউজার ক্রোম, টুলবার বা স্ক্রলবার ছাড়াই। পেজের কন্টেন্ট যেভাবে স্ক্রিনে দেখা যায় ঠিক সেভাবে। এক ক্লিকে তাৎক্ষণিক ক্যাপচার।
একেবারে ওপর থেকে একদম নিচ পর্যন্ত পুরো পেজটি ক্যাপচার করুন, যার মধ্যে স্ক্রিনের নিচের সব কন্টেন্টও অন্তর্ভুক্ত। টুলটি স্বয়ংক্রিয়ভাবে পেজটি স্ক্রল করে, প্রতিটি সেকশন ক্যাপচার করে এবং সেগুলোকে একটি নিরবচ্ছিন্ন ছবিতে যুক্ত করে। এটি যেকোনো দৈর্ঘ্যের পেজে কাজ করে।
স্ক্রিনশটগুলো আপনার ডিসপ্লের নেটিভ পিক্সেল রেশিওতে (রেটিনাতে ২x, কিছু উইন্ডোজ ডিসপ্লেতে ১.৫x) ক্যাপচার করা হয়। এর ফলে একটি ঝকঝকে, হাই-রেজোলিউশন ছবি পাওয়া যায় যা জুম করলেও পরিষ্কার দেখায় — এটি অপারেটিং সিস্টেমের স্ক্রিনশটের মতো ঝাপসা হয় না।
ক্যাপচার করা ছবিটি লসলেস PNG ফাইল হিসেবে সেভ হয় এবং সাথে সাথে আপনার ডিভাইসে ডাউনলোড হয়। কোনো ক্লাউড আপলোড নেই, প্রসেসিংয়ের জন্য অপেক্ষা নেই এবং কোনো অ্যাকাউন্টের প্রয়োজন নেই। কয়েক সেকেন্ডের মধ্যে ফাইলটি আপনার ডাউনলোড ফোল্ডারে চলে আসবে।
ক্যাপচারে শুধুমাত্র ওয়েবপেজের কন্টেন্ট অন্তর্ভুক্ত থাকে — কোনো ব্রাউজার ট্যাব, অ্যাড্রেস বার, বুকমার্ক বার বা এক্সটেনশন টুলবার থাকে না। আউটপুটটি ঠিক সেরকম দেখায় যদি ব্রাউজার UI না থাকতো।
যেকোনো ওয়েবপেজ যেভাবেই তৈরি হোক না কেন — স্ট্যাটিক HTML, SPA (React, Vue), লেজি-লোডেড ছবিযুক্ত পেজ, ইনফিনিট স্ক্রল, স্টিকি হেডার এবং ফিক্সড-পজিশন এলিমেন্ট। সম্পূর্ণ পেজ মোড এই সব কিছু সফলভাবে হ্যান্ডেল করতে পারে।
আপনার পোর্টফোলিওর জন্য আপনার ডিজাইন করা বা তৈরি করা ওয়েবসাইটের সম্পূর্ণ-পেজ স্ক্রিনশট নিন। সম্পূর্ণ পেজ মোড আপনাকে একটি নিরবচ্ছিন্ন ছবি দেয় যা পুরো পেজের ডিজাইন দেখায় — যা Behance, Dribbble বা পোর্টফোলিও কেস স্টাডির জন্য নিখুঁত।
বাগ রিপোর্ট করার সময় একটি স্ক্রিনশট হাজার শব্দের সমান। সমস্যাটি দেখা যাচ্ছে এমন সুনির্দিষ্ট ভিউপোর্ট ক্যাপচার করুন, অথবা একটি সম্পূর্ণ পেজের স্ক্রিনশট নিন যা দেখায় যে বাগটি পুরো লেআউটকে কীভাবে প্রভাবিত করছে। এটি আপনার GitHub ইস্যু বা Jira টিকেটে সংযুক্ত করুন।
স্টেকহোল্ডার রিভিউয়ের জন্য কোনো স্টেজিং সাইটের বর্তমান অবস্থা ক্যাপচার করুন। সম্পূর্ণ পেজ স্ক্রিনশট ক্লায়েন্টদের সাইট ভিজিট না করেই পুরো ডিজাইনটি দেখার সুযোগ দেয় — যা অ-প্রযুক্তিগত স্টেকহোল্ডারদের সাথে রিভিউ করার জন্য দরকারী।
পরিবর্তন করার আগে একটি স্ক্রিনশট নিন, তারপর পরিবর্তন করার পরে আরেকটি নিন। আপনার CSS বা লেআউট পরিবর্তনগুলো কেবল নির্দিষ্ট সেকশন নয় বরং পুরো পেজ জুড়ে সঠিক দেখাচ্ছে কিনা তা যাচাই করতে দুটি ছবি পাশাপাশি রেখে তুলনা করুন।
ব্লগ পোস্ট, টুইট বা প্রেজেন্টেশনের জন্য ওয়েব পেজের পরিষ্কার, পেশাদার ছবি তৈরি করুন। টুলবার এবং ব্রাউজার-ক্রোম মুক্ত আউটপুটটি ঝকঝকে এবং পেশাদার দেখায় — ব্রাউজার UI ক্রপ করার কোনো প্রয়োজন নেই।
DevSuite Pro ডক বা পপআপ ওপেন করুন এবং স্ক্রিনশট আইকনে ক্লিক করুন। দুটি অপশন সহ একটি মোড সিলেক্টর দেখা যাবে: "দৃশ্যমান এলাকা" এবং "সম্পূর্ণ পেজ"।
বর্তমান ভিউপোর্ট (আপনি এখন যা দেখছেন) ক্যাপচার করতে "দৃশ্যমান এলাকা" ক্লিক করুন, অথবা ওপর থেকে নিচ পর্যন্ত পুরো পেজ ক্যাপচার করতে "সম্পূর্ণ পেজ" ক্লিক করুন।
দৃশ্যমান এলাকা ক্যাপচার তাৎক্ষণিক (১ সেকেন্ডের নিচে) ঘটে। সম্পূর্ণ পেজ ক্যাপচারে কয়েক সেকেন্ড সময় লাগে কারণ টুলটি স্ক্রল করে এবং ছবিগুলো যুক্ত করে। একটি প্রগ্রেস ইন্ডিকেটর ক্যাপচার স্ট্যাটাস দেখায়।
ক্যাপচার করা ছবিটি স্বয়ংক্রিয়ভাবে PNG ফাইল হিসেবে ডাউনলোড হবে। ফাইলের জন্য আপনার ব্রাউজারের ডাউনলোড ফোল্ডার চেক করুন, যা পেজের টাইটেল এবং টাইমস্ট্যাম্প সহ নামাঙ্কিত হবে।
প্রতিটি ক্যাপচারের পর টুলটি সক্রিয় থাকে। পুনরায় সক্রিয় না করেই একই বা ভিন্ন পেজের অতিরিক্ত স্ক্রিনশট নিন। স্ক্রল করুন, পরিবর্তন করুন এবং আবার ক্যাপচার করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
