কোডিং এর সাথে অপরিচিত একজন ব্যক্তির জন্য, ঘটনাক্রমে পরিদর্শন উপাদান খোলার পরে ভয় পাওয়া সহজ। যাইহোক, যদি আপনি জটিল কোড দেখার পরে শান্ত থাকেন, তাহলে Inspect Element আপনাকে একগুচ্ছ দরকারী (এবং কিছু অপ্রয়োজনীয়) জিনিসগুলি সম্পাদন করতে দেয়, যদি আপনি এটি করতে জানেন।
এখানে, আমরা সাতটি মজার জিনিস দেখব যা আপনি আপনার ব্রাউজারের ডেভেলপার টুল এবং ইন্সপেক্ট এলিমেন্ট ব্যবহার করে করতে পারেন।
পরিদর্শন উপাদান কি?
ইন্সপেক্ট এলিমেন্ট হল একটি ডেভেলপার টুল যা ব্রাউজারদের দ্বারা অফার করা হয় যেকোন ওয়েবপৃষ্ঠার সোর্স কোড দেখতে এবং অস্থায়ীভাবে পরিবর্তন করার জন্য। এই টুলটি ব্যবহার করে, ডেভেলপার এবং ডিজাইনাররা যেকোনো ওয়েবসাইটের ফ্রন্ট-এন্ড চেক এবং পরিবর্তন করতে পারেন।
আপনি কোড পরিবর্তন করার সাথে সাথে ব্রাউজারটি রিয়েল-টাইমে ওয়েবপৃষ্ঠা আপডেট করতে থাকে। এই পরিবর্তনটি কেবল ততক্ষণ পর্যন্ত স্থায়ী হয় যতক্ষণ না ওয়েবসাইটে আপনার সেশন থাকবে এবং শুধুমাত্র একটি ডিভাইসে আপনার কাছে দৃশ্যমান হবে। আপনি ওয়েবপৃষ্ঠাটি ছেড়ে যাওয়ার সাথে সাথে সমস্ত পরিবর্তন মুছে ফেলা হবে৷
1. ছবি এবং ভিডিও ডাউনলোড করুন
সাধারণত, আপনি সহজেই ওয়েব থেকে ফটোগুলিকে ডান-ক্লিক করে সেভ করে ডাউনলোড করতে পারেন৷ কিন্তু আপনি সব ওয়েবসাইটে তা করতে পারবেন না। এই ক্ষেত্রে, উপাদান পরিদর্শন বৈশিষ্ট্য কাজে আসে।
যেকোনো মিডিয়া ফাইল ডাউনলোড করতে, এতে ডান-ক্লিক করুন এবং পরিদর্শন করুন বেছে নিন .
2. হেডার এবং পাঠ্যকে প্র্যাঙ্ক ফ্রেন্ডে পরিবর্তন করুন
স্ক্র্যাচ থেকে একটি জাল ছবি তৈরি করার পরিবর্তে, আপনি ওয়েবপৃষ্ঠার পাঠ্য পরিবর্তন করতে এবং আপনার বন্ধুদের প্র্যাঙ্ক টানতে DevTools ব্যবহার করতে পারেন৷
একটি নকল ওয়েবপেজ তৈরি করতে, যে কোনও স্বনামধন্য ওয়েবসাইটের পৃষ্ঠা খুলুন এবং এর শিরোনামে ডান-ক্লিক করুন। তারপর, পরিদর্শন এ ক্লিক করুন৷ ফলক খুলতে। আরো-এ ক্লিক করুন৷ হাইলাইট করা কোডের আইকন এবং HTML হিসাবে সম্পাদনা করুন নির্বাচন করুন . তারপর আপনার নিজের জাল শিরোনাম দিয়ে শিরোনাম প্রতিস্থাপন করুন।
একইভাবে, আপনি পাঠ্যের অন্যান্য অংশ যেমন উদ্ধৃতি, তারিখ এবং লেখকের নাম পরিবর্তন করতে পারেন। ইমেজ পরিবর্তন করতে, একই ধাপ ব্যবহার করে ছবির উৎস সরান। তারপর Google থেকে একটি সম্পর্কিত ছবি খুঁজুন, এর ছবির ঠিকানা কপি করুন এবং উৎসে পেস্ট করুন।
এইভাবে, আপনি খুব কষ্ট ছাড়াই আপনার বন্ধুদের উপর একটি কৌতুক টানতে পারেন। যাইহোক, একটি লিঙ্কের পরিবর্তে লুকানো DevTools ফলক সহ স্ক্রিনশট পাঠানো নিশ্চিত করুন, কারণ পরিবর্তনটি অস্থায়ী৷
3. একটি ওয়েবপৃষ্ঠার রঙ এবং হরফ পরিবর্তন করুন
ইন্সপেক্ট এলিমেন্ট ব্যবহার করে আরেকটি ছিমছাম জিনিস যা আপনি করতে পারেন তা হল যেকোনো ওয়েবপেজের রং এবং ফন্ট পরিবর্তন করা। আপনি যে বস্তুর রং পরিবর্তন করতে চান তার উপর ডান-ক্লিক করুন এবং পরিদর্শন করুন নির্বাচন করুন . তারপর শৈলীতে ট্যাব, রঙ বা পটভূমির রঙ খুঁজুন এবং হেক্স কোড লিখুন। একইভাবে, আপনি শৈলী ট্যাব থেকে ফন্টের আকার এবং শৈলী পরিবর্তন করতে পারেন।
আপনি এই কৌশলটি ব্যবহার করে যেকোন ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন এবং এটি পড়তে সহজ করতে পারেন। উদাহরণ স্বরূপ, আপনি যেকোন ওয়েবসাইটের একটি ডার্ক মোড তৈরি করতে পারেন, পঠনযোগ্যতা বাড়াতে ফন্টের সাইজ বাড়াতে পারেন এবং অপ্রীতিকর উপাদানগুলি মুছে ফেলতে পারেন৷
4. লুকানো পাসওয়ার্ড দেখুন
যদি কোনো ওয়েবসাইট তারকাচিহ্ন দ্বারা আপনার পাসওয়ার্ড লুকিয়ে থাকে, আপনি এটি দেখতে ওয়েবপৃষ্ঠা কোড টুইক করতে পারেন। DevTools-এ যান লুকানো পাসওয়ার্ডে ডান ক্লিক করে। তারপর ইনপুট ট্যাগের মধ্যে, পাসওয়ার্ড থেকে টেক্সটে টাইপ পরিবর্তন করুন এবং ফাঁকা স্ক্রিনে ক্লিক করুন। এখন, আপনার পাসওয়ার্ড দৃশ্যমান।
এই কৌশলটি কাজে আসে যখন আপনি আপনার পাসওয়ার্ড ভুলে যান কিন্তু পাসওয়ার্ড ম্যানেজারে সংরক্ষণ করেন। সুতরাং, আপনি সরাসরি ওয়েবপৃষ্ঠা থেকে আপনার পাসওয়ার্ড দেখতে এবং মনে রাখতে পারেন৷
৷5. একটি ওয়েবসাইটের মোবাইল সংস্করণ দেখুন
আমরা সবাই জানি কিভাবে আপনার মোবাইল ফোনে ডেস্কটপ সাইট দেখতে হয়। কিন্তু আপনি ডেস্কটপে মোবাইল সংস্করণ দেখতে ইন্সপেক্ট এলিমেন্ট ব্যবহার করতে পারেন। এটি করতে, DevTools খুলুন এবং টগল ডিভাইস টুলবারে ক্লিক করুন বোতাম (উপরের ডান দিক থেকে দ্বিতীয় বোতাম)।
একইভাবে, আপনি ব্যবহারকারী এজেন্ট পরিবর্তন করতে পারেন এবং ওয়েবসাইটের বিভিন্ন সংস্করণ দেখতে পারেন। বিকাশকারী সরঞ্জামগুলিতে, আরো-এ ক্লিক করুন৷ উপরের-বাম কোণায় আইকন এবং নেটওয়ার্ক শর্ত নির্বাচন করুন। ডিফল্ট ব্রাউজার ব্যবহার করুন আনচেক করুন ব্যবহারকারী এজেন্ট-এ বক্স করুন বিভাগ এবং নীচের ড্রপ-ডাউন মেনু থেকে অন্য কোনো ব্যবহারকারী এজেন্ট নির্বাচন করুন।
6. একটি ওয়েবসাইট থেকে রং নির্বাচন করুন
একটি তৃতীয় পক্ষের রঙ পিকার এক্সটেনশন ইনস্টল করার পরিবর্তে, আপনি এখন ইন্সপেক্ট এলিমেন্ট ব্যবহার করে আপনার পছন্দের রং বাছাই করতে পারেন। ওয়েব পৃষ্ঠা থেকে যেকোনো রঙ বাছাই করতে, উপাদান পরিদর্শন করুন এ যান . তারপর, শৈলীতে যান৷ ট্যাব এবং রঙ বা পটভূমি খুঁজুন। এখন, রঙ পিকার আনতে রঙের পরে ছোট বাক্সে ক্লিক করুন।
এখন আপনি রঙ চয়ন করতে এবং শৈলী থেকে হেক্স কোড অনুলিপি করতে পৃষ্ঠার যে কোনও জায়গায় ক্লিক করতে পারেন ট্যাব আপনি যদি RGB বা HSLA কোড চান, তাহলে আপনি তীর ব্যবহার করে দেখতে পারেন বোতাম।
সুতরাং, যখনই আপনি ভবিষ্যতে ব্যবহার করতে চান এমন কোনও ওয়েবসাইটে একটি দুর্দান্ত রঙ দেখতে পান, কেবলমাত্র পরিদর্শন উপাদান ব্যবহার করুন এবং রেফারেন্সের জন্য কোডটি সংরক্ষণ করুন৷
7. কোনো এক্সটেনশন ছাড়াই স্ক্রিনশট নিন
DevTools আপনাকে পরিষ্কার এবং পরিষ্কার স্ক্রিনশট নিতে দেয়। একটি স্ক্রিনশট নিতে, DevTools খুলুন , আরো-এ ক্লিক করুন আইকন, এবং একটি কমান্ড চালান নির্বাচন করুন . অনুসন্ধান বাক্সে, স্ক্রিনশট টাইপ করুন। আপনি চারটি ভিন্ন ধরনের স্ক্রিনশট-ক্যাপচার বিকল্প দেখতে পাবেন।
একটি এলাকা স্ক্রিনশট নির্বাচন করে, আপনি উইন্ডোতে কোনো নির্দিষ্ট এলাকা হাইলাইট করতে পারেন, এবং আপনার ব্রাউজার এটি একটি PNG ফাইল হিসাবে সংরক্ষণ করে৷
একটি পূর্ণ-আকারের স্ক্রিনশট ক্যাপচার করা আপনার স্ক্রিনে দৃশ্যমান নয় এমন জিনিসগুলি সহ সমগ্র ওয়েবপৃষ্ঠার একটি চিত্র সংরক্ষণ করে৷ একটি নোড স্ক্রিনশট শুধুমাত্র নির্দিষ্ট উপাদানের একটি ছবি ক্যাপচার করে। সবশেষে, ক্যাপচার স্ক্রিনশট বিকল্পটি আপনার স্ক্রিনে দৃশ্যমান সবকিছুর ছবি সংরক্ষণ করে।
উপাদান পরিদর্শনের গোপন কৌশল শিখুন
এগুলি ছিল কয়েকটি কৌশল যা আপনি পরিদর্শন উপাদান ব্যবহার করে সম্পাদন করতে পারেন। DevTools ব্যবহার করে আপনি করতে পারেন এমন আরও অনেক দরকারী জিনিস রয়েছে৷
৷তাই আপনি যদি একজন পাওয়ার ব্যবহারকারী হতে চান এবং আপনার বন্ধুদের প্রভাবিত করতে চান, তাহলে DevTools-এর আরও লুকানো বৈশিষ্ট্যগুলি শেখা একটি ভাল ধারণা৷
