কোনও ওয়েব পৃষ্ঠার HTML এবং CSS দেখুন
ওয়েবসাইট কোড লাইন দিয়ে তৈরি করা হয়, কিন্তু ফলাফল ইমেজ, ভিডিও, ফন্ট এবং আরও নির্দিষ্ট পৃষ্ঠাগুলি। ঐসব উপাদানগুলির পরিবর্তন করতে বা এটি কী কী গঠিত হয়েছে তা দেখার জন্য আপনাকে নির্দিষ্ট লাইনের কোডটি খুঁজে বের করতে হবে যা এটি নিয়ন্ত্রণ করে। আপনি একটি উপাদান পরিদর্শন সরঞ্জাম দিয়ে এটি করতে পারেন।
অধিকাংশ ওয়েব ব্রাউজার আপনাকে একটি পরিদর্শন সরঞ্জাম ডাউনলোড বা একটি অ্যাড-অন ইনস্টল করতে না। পরিবর্তে, তারা আপনাকে পৃষ্ঠার উপাদান ডান-ক্লিক করুন এবং পরিদর্শন বা নিরীক্ষণ উপাদান নির্বাচন করুন । যাইহোক, প্রক্রিয়া আপনার ব্রাউজারে একটু ভিন্ন হতে পারে।
ক্রোমের উপাদানগুলি পরিদর্শন করুন
গুগল ক্রোমের সাম্প্রতিকতম সংস্করণ আপনাকে কয়েকটি উপায়ে পৃষ্ঠাটি পরিদর্শন করতে দেয়, যা তার অন্তর্নির্মিত Chrome DevTools ব্যবহার করে:
- পৃষ্ঠায় (বা একটি ফাঁকা এলাকা) কিছু রাইট ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন
- Ctrl + Shift + I কীবোর্ড শর্টকাট লিখুন
- আরো সরঞ্জাম> বিকাশকারী সরঞ্জাম বিকল্প অ্যাক্সেস করতে Chrome মেনু ব্যবহার করুন
Chrome DevTools আপনাকে সহজে কপি বা HTML লাইন সম্পাদনা করতে বা সম্পূর্ণরূপে উপাদানগুলি মুছে ফেলতে বা মুছে ফেলার মতো জিনিসগুলি করতে দেয় (পৃষ্ঠা পুনঃলোড পর্যন্ত)।
একবার DevTools পৃষ্ঠাটির পাশে খোলে, আপনি কোথায় অবস্থান করছেন তা পরিবর্তন করতে পারেন, পৃষ্ঠাটির পপ করুন, পৃষ্ঠার সমস্ত ফাইল অনুসন্ধান করুন, নির্দিষ্ট পরীক্ষার জন্য পৃষ্ঠার উপাদানগুলি নির্বাচন করুন, ফাইলগুলি এবং URL অনুলিপি করুন, এমনকি একটি গুচ্ছ কাস্টমাইজ করুন সেটিংস এর
ফায়ারফক্সের উপাদানগুলি পরিদর্শন করুন
ক্রোমের মত, ইন্সপেক্টর নামক টুলটি খুলতে ফায়ারফক্সের কয়েকটি ভিন্ন উপায় রয়েছে:
- পৃষ্ঠায় একটি খালি এলাকাটি ডান-ক্লিক করুন বা একটি উপাদান নির্বাচন করুন , এবং উপাদান পরিদর্শন নির্বাচন করুন
- কীবোর্ডের সাথে Ctrl + Shift + T বা Ctrl + Shift + I লিখুন
- ফায়ারফক্স মেনু থেকে, বিকাশকারী > ইন্সপেক্টর ক্লিক করুন
- সরঞ্জাম মেনু থেকে, ওয়েব ডেভেলপার> ইন্সপেক্টর ক্লিক করুন
ফায়ারফক্সের বিভিন্ন উপাদানের উপর মাউস নিয়ে যাওয়ার সময়, ইন্সপেক্টর টুলটি স্বয়ংক্রিয়ভাবে উপাদানের সোর্স কোড তথ্য খুঁজে পায়। একটি উপাদান ক্লিক করুন এবং "অন-ফ্লাই অনুসন্ধান" বন্ধ হবে এবং আপনি ইন্সপেক্টর উইন্ডো থেকে উপাদান পরীক্ষা করতে পারেন।
সমস্ত সমর্থিত নিয়ন্ত্রণগুলি খুঁজতে একটি উপাদান ডান-ক্লিক করুন। আপনি এইচটিএমএল হিসাবে পাতা সম্পাদন, ভিতরের বা বহিরাগত HTML কোড পেস্ট করুন, DOM বৈশিষ্ট্যগুলি, স্ক্রিনশট দেখান বা নোড মুছে ফেলতে, নতুন বৈশিষ্ট্যগুলি সহজে প্রয়োগ করতে, পৃষ্ঠার CSS সিলেক্ট করুন এবং আরও অনেক কিছু দেখতে পারেন।
অপেরাতে উপাদানগুলি পরিদর্শন করুন
অপেরাটি ডিওএম ইন্সপেক্টর টুলের সাথেও উপাদানগুলিকে পরিদর্শন করতে পারে, যা ক্রোমের অনুরূপ। এখানে কিভাবে এটি পেতে:
- কীবোর্ড শর্টকাট Ctrl + Shift + I ব্যবহার করুন
- মেনু> আরো সরঞ্জাম> বিকাশকারী মেনুতে দেখান , এবং তারপর মেনু> বিকাশকারী> বিকাশকারী সরঞ্জামগুলির মাধ্যমে মেনুটি খুলুন
- পৃষ্ঠার যেকোন উপাদান ডান-ক্লিক মেনু থেকে, পরিদর্শন উপাদান নির্বাচন করুন
ইন্টারনেট এক্সপ্লোরারের উপাদানগুলি পরিদর্শন করুন
একটি অনুরূপ পরিদর্শন উপাদান টুল, বিকাশকারী সরঞ্জাম বলা হয়, ইন্টারনেট এক্সপ্লোরার পাওয়া যায়:
- কীবোর্ডে F12 চাপুন
- Tools> F12 বিকাশকারী মেনু বিকল্পটি ব্যবহার করুন ( Alt + X আঘাত করুন যদি আপনি সরঞ্জাম মেনু না দেখেন)
- পৃষ্ঠার উপর ডান-ক্লিক করুন এবং পরিদর্শন উপাদান ক্লিক করুন
IE এর এই নতুন মেনুতে একটি নির্বাচন উপাদান টুল রয়েছে যা আপনাকে তার HTML এবং CSS বিশদ দেখতে পৃষ্ঠার কোনও উপাদানের উপর ক্লিক করতে দেয়। আপনি DOM এক্সপ্লোরার ট্যাবের মাধ্যমে ব্রাউজ করার সময় আপনি হাইলাইট করা উপাদানটি সহজেই অক্ষম / সক্ষম করতে পারেন।
উপরের ব্রাউজারে অন্যান্য উপাদান ইন্সপেক্টর সরঞ্জামগুলির মতই, ইন্টারনেট এক্সপ্লোরার আপনাকে HTML কে সম্পাদনা, কপি এবং পেস্ট করার পাশাপাশি এইচটিএমএল সম্পাদনা, এট্রিবিউট যুক্ত করতে, স্টাইলগুলির সাথে সংযুক্ত উপাদানের অনুলিপি এবং আরো অনেক কিছু করতে দেয়।