পরিদর্শন উপাদান কিভাবে ব্যবহার করবেন

বেশিরভাগ লোকই জানেন না যে তাদের নিষ্পত্তিতে বিকাশকারী সরঞ্জামগুলির একটি ভান্ডার রয়েছে এবং এটি তাদের প্রিয় ব্রাউজারে লুকানো রয়েছে।

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

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

একটি নির্দিষ্ট ব্রাউজারে পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

বেশিরভাগ ব্রাউজারে একটি ওয়েবসাইটের উপাদানগুলি পরিদর্শন করার জন্য সরঞ্জাম রয়েছে তবে সেগুলি সাধারণত একইভাবে কাজ করে।

গুগল ক্রোমে পরিদর্শন উপাদান ব্যবহার করে

1. আপনি যে ওয়েবসাইটটি পরিদর্শন করতে চান সেটি খুলুন।

   

2. পৃষ্ঠার যেকোনো জায়গায় ডান-ক্লিক করুন এবং নির্বাচন করুন পরিদর্শন করুন.

   

   বা

3. আপনার টুলবারের ডান কোণে তিনটি উল্লম্ব বিন্দুতে ক্লিক করুন।

   

4. যাও আরও টুল.

   

5. নির্বাচন করুন ডেভেলপার টুলস.

   

   বা

6. চাপুন F12 পিসিতে কীবোর্ড শর্টকাট কী বা সিএমডি + বিকল্প + আই একটি ম্যাকে

মাইক্রোসফ্ট এজ এ পরিদর্শন উপাদান ব্যবহার করে

1. একটি ওয়েবসাইট খুলুন।

   

2. ব্রাউজারের টুলবারের উপরের ডানদিকে তিনটি উল্লম্ব বিন্দুতে ক্লিক করুন।
3. নিচে স্ক্রোল করুন এবং ক্লিক করুন আরও টুল.

   

4. ক্লিক করুন ডেভেলপার টুলস.

   

   বা

5. ওয়েবসাইটের যেকোনো জায়গায় ডান-ক্লিক করুন।
6. ক্লিক করুন পরিদর্শন করুন.

   

   বা

7. প্রেস করুন Ctrl + Shift + I.

এই তিনটি পদ্ধতির যেকোনো একটি আপনাকে একই ফলাফল দেবে।

আপনি যদি এটি সঠিকভাবে করেন তবে আপনি আপনার ব্রাউজারের নীচে একটি নতুন ফলক খুলতে দেখতে পাবেন। এগুলি হল ডেভেলপার টুল এবং এলিমেন্ট ট্যাব অন্তর্ভুক্ত। উপাদান পরিদর্শন করার জন্য এই টুলটি আপনার প্রয়োজন।

প্যানেলটি আপনার স্ক্রিনের নীচে একটি ডিফল্ট হিসাবে খুলবে, তবে আপনি সর্বদা এটি কীভাবে প্রদর্শিত হবে তা পরিবর্তন করতে পারেন। ডেভেলপার টুলস প্যানেল রিপজিশন করতে এই সহজ ধাপগুলি অনুসরণ করুন:

1. বিকাশকারী সরঞ্জাম প্যানেলের উপরের কোণে তিনটি উল্লম্ব বিন্দুতে ক্লিক করুন।

   

2. একটি ডক সাইড নির্বাচন করুন (বাম, নীচে, বা ডান) বা একটি পৃথক উইন্ডোতে আনডক করুন।

   

ডেভেলপার টুলস প্যানেল ফ্রেমের প্রান্তের পাশে কার্সারকে ঘোরালে এবং টেনে আনলে কর্মক্ষেত্রটি সংকীর্ণ বা প্রশস্ত হবে। উদাহরণস্বরূপ, আপনি যদি ব্রাউজার উইন্ডোর ডানদিকে প্যানেলটি ডক করতে চান তবে বাম সীমানায় ঘোরাঘুরি করার চেষ্টা করুন। আপনি যখন তীর কার্সারটি দেখতে পান তখন এটির আকার পরিবর্তন করতে আপনি প্যানেলটিকে টেনে আনতে পারেন।

পরিদর্শন উপাদান ব্যবহার করে (ওএস নির্দিষ্ট)

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

একটি Chromebook এ পরিদর্শন উপাদান কিভাবে ব্যবহার করবেন

একটি Chromebook-এর ডিফল্ট ব্রাউজার হল Google, তাই অ্যাক্সেস করতে Chrome ব্রাউজারের নির্দেশাবলী অনুসরণ করুন৷ উপাদান পরিদর্শন. এখানে আপনার জন্য একটি ছোট রিফ্রেশার কোর্স রয়েছে:

1. একটি ওয়েবসাইট খুলুন।

   

2. টুলবারের উপরের ডানদিকে তিনটি উল্লম্ব লাইনে ক্লিক করুন।

   

3. নির্বাচন করুন আরও টুল.

   

4. ক্লিক করুন ডেভেলপার টুলস.

   

আপনি রাইট-ক্লিক পদ্ধতি বা ব্যবহার করতে পারেন F12 বিকাশকারী সরঞ্জামগুলি দ্রুত পেতে ফাংশন কী।

একটি অ্যান্ড্রয়েড ডিভাইসে পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

একটি Android ডিভাইসে পরিদর্শন উপাদান চালানো কিছুটা ভিন্ন। অ্যান্ড্রয়েডে কীভাবে পরিদর্শন উপাদান প্যানেলে যেতে হয় তা দেখুন:

1. চাপুন F12 ফাংশন কী.
2. পছন্দ করা ডিভাইস বার টগল করুন.

   

3. ড্রপ-ডাউন মেনু থেকে Android ডিভাইস নির্বাচন করুন।

   

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

এই পদ্ধতিটি ক্রোম এবং ফায়ারফক্স ব্রাউজার উভয়ের জন্যই কাজ করে কারণ তাদের ডেভেলপার টুলে ডিভাইস সিমুলেশন নামে একটি বৈশিষ্ট্য রয়েছে।

এটি আইফোন ডিভাইসের জন্য একই ভাবে কাজ করে। আপনাকে শুধু ড্রপ-ডাউন মেনুতে সঠিকটি নির্বাচন করতে হবে।

উইন্ডোজে কীভাবে পরিদর্শন উপাদান ব্যবহার করবেন

ইন্সপেক্ট এলিমেন্ট টুল অগত্যা ওএস-নির্দিষ্ট নয় কিন্তু ব্রাউজার-নির্দিষ্ট। এর মানে হল যে বিকাশকারী সরঞ্জামগুলি ব্রাউজারটির একটি বৈশিষ্ট্য যা আপনি ব্যবহার করেন এবং অগত্যা উইন্ডোজ নয়৷ যাইহোক, আপনি যে ব্রাউজারটি পছন্দ করেন তা নির্বিশেষে আপনি পরিদর্শন উপাদান প্যানেলে যেতে পারেন।

আপনি যদি Windows OS ব্যবহার করেন, তাহলে আপনি Microsoft Edge ব্রাউজার ব্যবহার করতে পারেন। এমএস এজ-এ কীভাবে পরিদর্শন উপাদান অ্যাক্সেস করবেন তা দেখুন:

1. আপনি যে ওয়েবসাইটটি পরিদর্শন করতে চান সেটি খুলুন।

   

2. ব্রাউজার উইন্ডোর কোণে তিনটি উল্লম্ব বিন্দুতে আলতো চাপুন।

   

3. নিচে স্ক্রোল করুন এবং নির্বাচন করুন আরও টুল.

   

4. ক্লিক করুন ডেভেলপার টুলস.

   

এছাড়াও আপনি ব্যবহার করতে পারেন F12 ফাংশন কী যদি আপনি পরিদর্শন উপাদানটি দ্রুত অ্যাক্সেস করতে চান। এছাড়াও, ওয়েব পৃষ্ঠায় ডান-ক্লিক করা এবং পরিদর্শন নির্বাচন করাও কাজ করে।

কীভাবে একটি ম্যাকে পরিদর্শন উপাদান ব্যবহার করবেন

আপনি যদি ম্যাক ব্যবহার করেন তবে আপনার পছন্দের ব্রাউজারটি সম্ভবত সাফারি। Safari-এ Inspect Elements খোলা Chrome এবং Firefox-এর থেকে কিছুটা আলাদা। কিন্তু এই পদক্ষেপগুলির সাথে এটি সহজ:

1. সাফারি ব্রাউজার খুলুন।
2. ক্লিক করুন সাফারি হেডার ট্যাবে।
3. নির্বাচন করুন পছন্দসমূহ ড্রপ-ডাউন মেনু থেকে।
4. ক্লিক করুন উন্নত স্ক্রিনের শীর্ষে অবস্থিত গিয়ার আইকন।
5. যে বক্সটি বলে তা চেক করুন মেনু বারে ডেভেলপ মেনু দেখান.

এই ধাপগুলির মধ্য দিয়ে যাওয়া আপনার ব্রাউজারে উপাদান পরিদর্শন বৈশিষ্ট্যটিকে সক্ষম করে৷ আপনি প্রথমে পরিদর্শন উপাদান সক্ষম না করলে, আপনি যখন একটি ওয়েবসাইট খুলবেন তখন আপনি বিকল্পটি দেখতে পাবেন না।

আপনি এই পদক্ষেপটি সম্পূর্ণ করার পরে, যেকোন খোলা ওয়েব পৃষ্ঠায় কেবল ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন। আপনি দ্রুত কী কমান্ড ব্যবহার করতে পারেন: সিএমডি + বিকল্প + আই (পরিদর্শন)।

একটি আইফোনে পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

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

1. যাও সেটিংস.

   

2. এখন, নির্বাচন করুন সাফারি.

   

3. নীচে স্ক্রোল করুন এবং আলতো চাপুন উন্নত মেনু.

   

4. এখন, চালু করতে টগল সুইচটি আলতো চাপুন ওয়েব ইন্সপেক্টর.

   

এছাড়াও, আপনাকে নিশ্চিত করতে হবে যে আপনার ম্যাকে বিকাশ মেনু সক্ষম করা আছে:

1. সাফারি খুলুন।
2. নির্বাচন করুন সাফারি শীর্ষ শিরোনাম থেকে।
3. পরবর্তী, ক্লিক করুন পছন্দসমূহ.
4. তারপর, ক্লিক করুন উন্নত.
5. যে বক্সটি বলে তা চেক করুন মেনু বারে ডেভেলপ মেনু দেখান.

iOS মোবাইল ডিভাইস এবং ম্যাক উভয়ই সক্ষম করার পরে, আপনি আপনার ম্যাকের শীর্ষ বারে বিকাশ মেনু দেখতে পাবেন। সংযুক্ত আইফোন এবং ডিভাইসে সক্রিয় ওয়েব পৃষ্ঠা দেখতে এটিতে ক্লিক করুন৷ ওয়েব পৃষ্ঠা নির্বাচন করা আপনার ম্যাক স্ক্রিনে একই পৃষ্ঠার জন্য একটি ওয়েব ইন্সপেক্টর উইন্ডোও খোলে।

মনে রাখবেন, যদিও, এই দিকনির্দেশগুলি শুধুমাত্র ম্যাক চালানোর সাফারির জন্য কাজ করে, উইন্ডোজে সাফারি নয়।

Google ফর্মগুলিতে পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

আপনি Google ফর্মগুলিতে পরিদর্শন উপাদান ব্যবহার করতে পারেন৷ যাইহোক, আপনি যদি একটি ক্যুইজের উত্তর খুঁজছেন, তবে আপনার ভাগ্যের বাইরে। আপনি কোডিং এ এমবেড করা উত্তর পাবেন না। আপনি যদি ফর্মটির নির্মাতা বা সম্পাদক হন তবেই আপনি উত্তরগুলি দেখতে পারেন৷ যেভাবেই হোক, আপনি যদি একজন ছাত্র হন Google Forms-এ একটি কুইজের উত্তর দিচ্ছেন, আপনি শুধুমাত্র আপনার নিজের উত্তর দেখতে পাবেন।

1. আপনি ফর্মটিতে ডান ক্লিক করতে পারেন এবং নির্বাচন করতে পারেন পরিদর্শন করুন ফর্মের সমস্ত কোড দেখতে।

এটি ব্লক করা হলে পরিদর্শন উপাদান কিভাবে ব্যবহার করবেন

মাঝে মাঝে, আপনি দেখতে পাবেন যে আপনি একটি ওয়েব পৃষ্ঠা পরিদর্শন করতে পারবেন না এবং আপনি যদি এটিতে ডান-ক্লিক করার চেষ্টা করেন তবে পরিদর্শন নির্বাচনটি ধূসর হয়ে যায়। আপনি ভাবতে পারেন যে এটি অবরুদ্ধ, তবে এর চারপাশে অসংখ্য উপায় রয়েছে:

পদ্ধতি 1 - জাভাস্ক্রিপ্ট বন্ধ করুন

1. ভিতরে যাও সেটিংস.

   

2. অনুসন্ধান করুন "জাভাস্ক্রিপ্ট”.

   

3. বন্ধ জাভাস্ক্রিপ্ট.

   

পদ্ধতি 2 - দীর্ঘ পথ বিকাশকারী সরঞ্জামগুলি অ্যাক্সেস করুন

পরিদর্শন করতে মাউসে ডান-ক্লিক করার পরিবর্তে, এটি করুন:

1. যাও সেটিংস আপনার ব্রাউজারে।

   

2. নির্বাচন করুন আরও টুল.

   

3. নিচে স্ক্রোল করুন এবং ক্লিক করুন ডেভেলপার টুলস.

   

পদ্ধতি 3 - ফাংশন কী ব্যবহার করা

আপনি ব্যবহার করে দেখতে পারেন F12 ওয়েব পৃষ্ঠাগুলিতে ফাংশন কী যা পরিদর্শনের জন্য ডান-ক্লিক ব্লক করে।

আপনার জন্য কাজ করে এমন একটি জুড়ে আসার আগে আপনাকে এই সমস্ত পদ্ধতি চেষ্টা করতে হতে পারে। শেষ অবলম্বন হিসাবে, আপনি টাইপ করে উত্স কোডটি দেখার চেষ্টা করতে পারেন৷ ভিউ-সোর্স: [সম্পূর্ণ url লিখুন].

ডিসকর্ডে পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

ডিসকর্ডে আপনার কোডিং পরীক্ষা করা একটি সহজ প্রক্রিয়া। শুধু ব্যবহার করুন Ctrl + Shift + I আদেশ বা F12 একটি ডিসকর্ড পৃষ্ঠায় কী।

স্কুল ক্রোমবুকে কীভাবে পরিদর্শন উপাদান ব্যবহার করবেন

যদি আপনার ক্রোমবুক একটি স্কুল দ্বারা জারি করা হয়, তাহলে উপাদান পরিদর্শন বৈশিষ্ট্য ব্যবহার করে কয়েকটি সহজ পদক্ষেপ অন্তর্ভুক্ত করে:

1. ওয়েব পেজে ডান-ক্লিক করুন বা দুই আঙুলে ট্যাপ করুন এবং নির্বাচন করুন পরিদর্শন করুন.
2. প্রেস করুন Ctrl + Shift + I.
3. ভিউ-সোর্স ব্যবহার করে দেখুন:[url] পদ্ধতি, যেমন "ভিউ-সোর্স://www.wikipedia.com", উদ্ধৃতি চিহ্ন বিনা.

যাইহোক, কিছু স্কুল এবং সংস্থা এই বৈশিষ্ট্যটি ব্লক করে। সুতরাং, যদি এটি আপনার জন্য কাজ না করে, তাহলে আপনাকে আপনার প্রতিষ্ঠান বা স্কুল প্রশাসকের সাথে যোগাযোগ করতে হতে পারে।

উত্তর খোঁজার জন্য পরিদর্শন উপাদান কীভাবে ব্যবহার করবেন

আপনি বিভিন্ন জিনিসের উত্তর খুঁজতে উপাদান পরিদর্শন ব্যবহার করতে পারেন যেমন:

1. মোবাইল ডিভাইসে সাইট ডিজাইনের পূর্বরূপ দেখা হচ্ছে।
2. প্রতিযোগীরা ব্যবহার করছে এমন কীওয়ার্ড খুঁজে বের করুন।
3. গতি পরীক্ষা.
4. একটি ওয়েব পৃষ্ঠায় টেক্সট পরিবর্তন.
5. আপনার যা প্রয়োজন তা ডেভেলপারদের দেখানোর জন্য দ্রুত উদাহরণ খুঁজুন।

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

এই টুলটি মার্কেটার, ডিজাইনার এবং ডেভেলপারদের জন্য ডিজাইনের পরিবর্তনগুলি চূড়ান্ত করার আগে দেখতে অমূল্য করে তোলে। যাইহোক, পরিদর্শন উপাদানের সাথে কোডিংয়ে পরিবর্তন করা চিরকাল স্থায়ী হয় না। আপনি যখন পৃষ্ঠাটি পুনরায় লোড করবেন, এটি তার ডিফল্ট অবস্থায় ফিরে যাবে।

অতিরিক্ত FAQ

উত্তর খোঁজার জন্য আমি কিভাবে পরিদর্শন উপাদান কমান্ড ব্যবহার করব?

ইন্সপেক্ট এলিমেন্ট ফিচার ব্যবহার করে উত্তর খোঁজার একমাত্র উপায় হল যদি ওয়েবসাইট জমা দেওয়ার পরে তাৎক্ষণিকভাবে তা প্রকাশ করে। এই উদাহরণে, উত্তরগুলি কোডিং-এ উপস্থিত থাকে।

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

পরিদর্শন উপাদান অবৈধ?

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

ব্রাউজারে পরিদর্শন উপাদান অক্ষম করা কি সম্ভব?

সংক্ষিপ্ত উত্তর হলো 'না'।

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

একটি ওয়েব পৃষ্ঠার অভ্যন্তরীণ সম্পর্কে জানুন

একটি ওয়েব পৃষ্ঠার পরিদর্শন উপাদান বৈশিষ্ট্যটি পরীক্ষা করা সম্ভবত একটি বিকাশকারী সরঞ্জাম যা আপনি কখনই জানেন না যে আপনার প্রয়োজন - এমনকি আপনি নিজে একজন বিকাশকারী না হলেও৷ এটিতে প্রচুর ডিজাইন এবং বিপণন অ্যাপ্লিকেশন রয়েছে যা আপনার ওয়েবসাইটটিকে আরও মসৃণ করে তুলতে পারে। এবং হতে পারে আপনি একটি প্রতিযোগী একটি প্রান্ত দিতে.

আপনি কি জন্য উপাদান পরিদর্শন ব্যবহার করবেন? নীচের মন্তব্য বিভাগে এটি সম্পর্কে আমাদের বলুন.