DOM এলিমেন্টগুলো পরিদর্শন ও সম্পাদনা করতে এলিমেন্টস প্যানেল ব্যবহার করুন।
সংক্ষিপ্ত বিবরণ
এলিমেন্টস প্যানেলটি DOM পরিদর্শন ও পরিবর্তন করার জন্য একটি শক্তিশালী ইন্টারফেস প্রদান করে। আপনি DOM ট্রি ব্যবহার করতে পারেন, যা একটি HTML ডকুমেন্টের মতো দেখতে, নির্দিষ্ট DOM নোড নির্বাচন করতে এবং অন্যান্য টুলের সাহায্যে সেগুলোকে পরিবর্তন করতে পারেন।
এলিমেন্টস প্যানেলে আরও নিম্নলিখিত ট্যাবগুলো রয়েছে, যেগুলোতে প্রাসঙ্গিক টুলগুলো আছে:
শৈলী :
- সমস্ত স্টাইল শীট থেকে একটি এলিমেন্টে প্রয়োগ করা CSS নিয়মগুলি দেখুন এবং ডিবাগ করুন ।
- যেকোনো অবৈধ, ওভাররাইড করা, নিষ্ক্রিয় বা অন্য কোনো CSS কোড খুঁজুন যা উদ্দেশ্য অনুযায়ী কাজ করে না।
- ডিক্লারেশন যোগ করে , ক্লাস প্রয়োগ করে এবং বক্স মডেলের সাথে ইন্টারঅ্যাক্ট করার মাধ্যমে এলিমেন্টগুলো সম্পাদনা করুন।
- DOM ট্রি-তে থাকা ব্যাজগুলির মাধ্যমে কন্টেইনার সম্পাদনার বিকল্পগুলি অ্যাক্সেস করুন।
গণনাকৃত : ক্রোম দ্বারা রেন্ডার করার সময় কোনো এলিমেন্টে প্রয়োগ করা সমাধানকৃত প্রোপার্টিগুলোর তালিকা দেখায় ।
লেআউট : এতে গ্রিড এবং ফ্লেক্সবক্স ওভারলে পরিবর্তন করার অপশন রয়েছে।
ইভেন্ট লিসেনার : সমস্ত ইভেন্ট লিসেনার এবং তাদের অ্যাট্রিবিউটগুলো তালিকাভুক্ত করে। এর মাধ্যমে আপনি ইভেন্ট লিসেনারের উৎস খুঁজে বের করতে এবং প্যাসিভ বা ব্লকিং লিসেনারগুলো ফিল্টার করতে পারবেন ।
DOM ব্রেকপয়েন্ট : এলিমেন্টস প্যানেল থেকে যোগ করা DOM পরিবর্তনের ব্রেকপয়েন্টগুলো তালিকাভুক্ত করে এবং আপনাকে সেগুলো সক্রিয়, নিষ্ক্রিয়, অপসারণ বা প্রকাশ করার সুযোগ দেয়।
প্রোপার্টি : অবজেক্টের নিজস্ব এবং উত্তরাধিকারসূত্রে প্রাপ্ত প্রোপার্টিগুলো পরিদর্শন ও সাজানোর জন্য একটি DOM নোড নির্বাচন করুন।
অ্যাক্সেসিবিলিটি : যেসব এলিমেন্টের ARIA লেবেল আছে এবং তাদের প্রোপার্টিগুলো তালিকাভুক্ত করে। আপনাকে একটি অ্যাক্সেসিবিলিটি ট্রি টগল এবং পরিদর্শন করার সুযোগ দেয় (পরীক্ষামূলক)।
এলিমেন্টস প্যানেলটি খুলুন
ডিফল্টরূপে, আপনি যখন ডেভটুলস খোলেন তখন এলিমেন্টস প্যানেলটি খুলে যায়। এছাড়াও, স্বয়ংক্রিয়ভাবে এলিমেন্টস প্যানেলটি খোলার জন্য আপনি পেজের যেকোনো নোড ইন্সপেক্ট করতে পারেন।
এলিমেন্টস প্যানেলটি ম্যানুয়ালি খুলতে:
- ডেভটুলস খুলুন ।
- নিম্নলিখিত বোতাম টিপে কমান্ড মেনু খুলুন:
- ম্যাকওএস: কমান্ড + শিফট + পি
- উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
-
Elementsটাইপ করা শুরু করুন, Show Elements নির্বাচন করুন এবং Enter চাপুন। DevTools আপনার DevTools উইন্ডোর নিচের Drawer- এ Elements প্যানেলটি প্রদর্শন করবে।