ওয়েব কম্পোনেন্ট DevTools ইন Chrome OffiDocs সহ

বর্ণনাঃ

ওয়েব কম্পোনেন্ট এবং ওয়েব কম্পোনেন্ট লাইব্রেরির জন্য ডেভেলপার টুলিং ওয়েব কম্পোনেন্ট DevTools ওয়েব কম্পোনেন্টগুলির সাথে কাজ করা সমস্ত বিকাশকারীদের লক্ষ্য করে৷

প্রদত্ত টুলিং একটি নতুন Chrome Devtools প্যানেল তৈরি করে, যা বর্তমান পৃষ্ঠার কাস্টম উপাদানগুলিকে দ্রুত দেখার অনুমতি দেয় এবং উল্লেখিত উপাদানগুলির বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলির পরিবর্তন সক্ষম করে৷

ওয়েব কম্পোনেন্ট DevTools কাস্টম এলিমেন্টস ম্যানিফেস্ট ব্যবহার করে (https://github.

com/webcomponents/custom-elements-manifest) ওয়েব কম্পোনেন্ট বিশ্লেষণ করতে।

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

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

আর পথ পেলেও দলিল লিখতে হচ্ছে।

querySelector("my-selector-string > element-name")।

setAttribute("my-attr", "foo") প্রতিবার যখন আপনি একটি মান পরিবর্তন করতে চান তা বেশ কষ্টকর।

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

সমস্যা: DevTools ব্যবহার করার সময় আপনি যে কোনও সমস্যায় পড়েন তা গিটহাব রিপোজিটরিতে জমা দেওয়া উচিত (https://github.

com/Matsuuu/web-component-devtools/issues)।

অতিরিক্ত তথ্য:

- Matsuuu দ্বারা অফার
- গড় রেটিং: 5 তারা (এটি পছন্দ হয়েছে)
- বিকাশকারী এই ইমেইল ঠিকানাটি spambots থেকে রক্ষা করা হচ্ছে. এটি দেখতে হলে আপনাকে JavaScript সক্রিয় করতে হবে.

ওয়েব কম্পোনেন্ট DevTools ওয়েব extension OffiDocs এর সাথে একত্রিত Chromium অনলাইন