কোডিংয়ের সাথে অপরিচিত একটি ব্যক্তির জন্য, Inspect Element অবিচারে খুলে ফেলার পর ভয় পাওয়া স্বাভাবিক। যিদি জটিল কোড দেখে আপনি শান্ত থাকেন, তবে Inspect Element আপনাকে অনেক উপকারী (এবং কিছু অনুপকারী) কাজ করতে দেয়, শর্তে আপনি জানেন কীভাবে করবেন।
এখানে, আমরা আপনার ব্রাউজারের ডেভেলপার টুলস এবং Inspect Element ব্যবহার করে আপনি যেসব মজার কাজ করতে পারেন সেগুলো দেখব।
Inspect Element কী?
Inspect Element হল ব্রাউজার দ্বারা প্রদত্ত একটি ডেভেলপার টুল যা যেকোনো ওয়েবপেজের সোর্স কোড देखने এবং অস্থায়ীভাবে পরিবর্তন করার সুযোগ দেয়। এই টুল ব্যবহার করে ডেভেলপাররা এবং ডিজাইনাররা যেকোনো ওয়েবসাইটের ফ্রন্ট-এন্ড যাচাই ও সংশোধন করতে পারেন।
আপনি কোড পরিবর্তন করার সাথে সাথে ব্রাউজার ওয়েবপেজকে রিয়েল-টাইমে আপডেট করে। এই পরিবর্তন শুধু আপনার ওয়েবসাইটে সেশন চলার 동안 এবং শুধু আপনার একই ডিভাইসে দৃশ্যমান থাকে। পেজ থেকে বের होते ही সকল পরিবর্তন মুছে যায়।
১. চিত্র এবং ভিডিও ডাউনলোড করুন
সাধারণত, আপনি ওয়েব থেকে ফটো ডাউনলোড করতে রাইট-ক্লিক করে সেভ করতে পারেন। কিন্তু সব ওয়েবসাইটে এটি সম্ভব নয়। সেক্ষেত্রে Inspect Element ফিচার বড় উপকারী হয়।
যেকোনো মিডিয়া ফাইল ডাউনলোড করতে, সেটার ওপর রাইট-ক্লিক করুন এবং Inspect বেছে নিন।
২. হেডার ও টেক্সট পরিবর্তন করে বন্ধুদের সাথে প্রাঙ্ক করুন
নকল ছবি বানানোর বদলে, আপনি DevTools ব্যবহার করে ওয়েবপেজের টেক্সট পরিবর্তন করে বন্ধুদের সাথে প্রাঙ্ক করতে পারেন।
নকল ওয়েবপেজ বানাতে, যেকোনো বিশ্বস্ত ওয়েবসাইটের পেজ খুলুন এবং এর টাইটেলের ওপর রাইট-ক্লিক করুন। তারপর Inspect-এ ক্লিক করুন প্যান খোলার জন্য। হাইলাইট করা কোডের More আইকনে ক্লিক করুন এবং Edit as HTML বেছে নিন। তারপর টাইটেলটি আপনার নকল হেডলাইন দিয়ে প্রতিস্থাপন করুন।
একইভাবে, আপনি অন্যান্য টেক্সট বডি যেমন এক্সসার্প্ট, তারিখ, এবং লেখকের নাম পরিবর্তন করতে পারেন। চিত্র পরিবর্তন করতে, একই ধাপে চিত্রের সোর্স মুছে দিন। তারপর গুগল থেকে একটি প্রাসঙ্গিক চিত্র খুঁজে বের করুন, এর চিত্র ঠিকানা কপি করুন, এবং সেটি সোর্সে পেস্ট করুন।
এভাবে, আপনি কোনো বড় কষ্ট ছাড়াই বন্ধুদের সাথে প্রাঙ্ক করতে পারেন। তবে নিশ্চিত করুন যে আপনি DevTools প্যান লুকিয়ে স্ক্রিনশট পাঠাচ্ছেন, লিঙ্ক নয়, কারণ পরিবর্তনটি অস্থায়ী।
৩. ওয়েবপেজের রং এবং ফন্ট পরিবর্তন করুন
Inspect Element ব্যবহার করে আপনি যেকোনো ওয়েবপেজের রং এবং ফন্ট পরিবর্তন করতে পারেন। যেসব অবজেক্টের রং পরিবর্তন করতে চান সেগুলোর ওপর রাইট-ক্লিক করুন এবং Inspect বেছে নিন। তারপর Styles ট্যাবে, color বা background-color খুঁজে বের করুন এবং হেক্স কোড লিখুন। একইভাবে, Styles ট্যাব থেকে ফন্ট সাইজ এবং স্টাইল পরিবর্তন করতে পারেন।
আপনি এই ট্রিক ব্যবহার করে যেকোনো ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন এবং পড়া সহজ করতে পারেন। উদাহরণস্বরূপ, আপনি যেকোনো ওয়েবসাইটের ডার্ক মোড বানাতে পারেন, পঠনযোগ্যতা বাড়াতে ফন্ট সাইজ বড় করতে পারেন, এবং বাধাদायक উপাদানগুলো মুছে ফেলতে পারেন।
৪. লুকানো পাসওয়ার্ড দেখুন
যদি কোনো ওয়েবসাইট আপনার পাসওয়ার্ড তারকাচিহ্ন দিয়ে লুকিয়ে রাখে, তবে আপনি ওয়েবপেজের কোড টুইক করে সেটি দেখতে পারেন। লুকানো পাসওয়ার্ডের ওপর রাইট-ক্লিক করে DevTools-এ যান। তারপর input ট্যাগের মধ্যে type-কে password থেকে text-এ পরিবর্তন করুন এবং খালি স্ক্রিনে ক্লিক করুন। এখন আপনার পাসওয়ার্ড দৃশ্যমান হবে।
এই ট্রিক তখন খুব কাজে আসে যখন আপনি আপনার পাসওয়ার্ড ভুলে গেছেন কিন্তু পাসওয়ার্ড ম্যানেজারে সেভ করে রাখেছেন। তখন আপনি সরাসরি ওয়েবপেজ থেকে আপনার পাসওয়ার্ড দেখে মনে করতে পারেন।
৫. ওয়েবসাইটের মোবাইল ভার্সন দেখুন
আমরা সবাই জানি মোবাইল ফোনে ডেস্কটপ সাইট কীভাবে দেখতে হয়। কিন্তু আপনি Inspect Element ব্যবহার করে ডেস্কটপে মোবাইল ভার্সনও দেখতে পারেন। এর জন্য, DevTools খুলুন এবং Toggle Device Toolbar বাটনে ক্লিক করুন (উপরের ডান থেকে দ্বিতীয় বাটন)।
একইভাবে, আপনি ইউজার এজেন্ট সইচ করে ওয়েবসাইটের বিভিন্ন ভার্সন দেখতে পারেন। ডেভেলপার টুলসে, উপরের বাম কোণার More আইকনে ক্লিক করুন এবং network conditions বেছে নিন। User Agent সেকশনে Use Default Browser বক্স অনচেক করুন এবং নিচের ড্রপ-ডাউন মেনু থেকে যেকোনো অন্য ইউজার এজেন্ট বেছে নিন।
৬. ওয়েবসাইট থেকে রং বেছে নিন
থার্ড-পার্টি কালার পিকার এক্সটেনশন ইনস্টল করার বদলে, আপনি এখন Inspect Element ব্যবহার করে আপনার পছন্দের রং বেছে নিতে পারেন। ওয়েব পেজ থেকে যেকোনো রং বেছে নতে, Inspect Element-এ যান। তারপর, Styles ট্যাবে যান এবং color বা background খুঁজে বের করুন। এখন, রংয়ের পরে ছোট বক্সে ক্লিক করুন কালার পিকার আনতে।
এখন আপনি পেজের যেকোনো জায়গায় ক্লিক করে রং বেছে নিতে পারেন এবং Styles ট্যাব থেকে হেক্স কোড কপি করতে পারেন। আপনি যদি RGB বা HSLA কোড চান, তবে Arrow বাটনগুলো ব্যবহার করে সেগুলো দেখতে পারেন।
তাই, যেকোনো ওয়েবসাইটে আপনি যদি কোনো সুন্দর রং দেখেন যা ভবিষ্যতে ব্যবহার করতে চাইবেন, সিম্পlemente Inspect Element ব্যবহার করুন এবং রেফারেন্সের জন্য কোডটি সংরক্ষণ করুন।
৭. এক্সটেনশন ছাড়া স্ক্রিনশট নিন
DevTools আপনাকে স্বচ্ছ ও স্পষ্ট স্ক্রিনশট लेनेের অনুমতি দেয়। স্ক্রিনশট लेने জন্য, DevTools খুলুন, More আইকনে ক্লিক করুন, এবং Run a Command বেছে নিন। সার্চ বক্সে screenshot লিখুন। আপনি চার ধরনের স্ক্রিনশট ক্যাপচারিং অপশন দেখবেন।
Area screenshot বেছে নিয়ে, আপনি উইন্ডোর যেকোনো নির্দিষ্ট অংশ হাইলাইট করতে পারেন, এবং আপনার ব্রাউজার সেটিকে PNG ফাইল হিসেবে সংরক্ষণ করবে।
Full-size screenshot ক্যাপচার করলে পুরো ওয়েবপেজের চিত্র সংরক্ষণ হয়, যেসব আপনার স্ক্রিনে দৃশ্যমান নয়। Node screenshot শুধু নির্দিষ্ট এলিমেন্টের চিত্র ক্যাপচার করে। এবং capture screenshot অপশন আপনার স্ক্রিনে দৃশ্যমান সবকিছুর চিত্র সংরক্ষণ করে।
Inspect Element-এর লুকানো ট্রিকগুলো শিখুন
এই ছিল শুধু কিছু ট্রিক যা আপনি Inspect Element ব্যবহার করে করতে পারেন। DevTools ব্যবহার করে আপনি আরও অনেক উপকারী কাজ করতে পারেন।
তাই যদি আপনি পাওয়ার ইউজার बनতে চান এবং বন্ধুদের বিস্মিত করতে চান, তবে DevTools-এর আরও লুকানো ফিচারগুলো শিখতে ভালো আইডিয়া।
