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