ابزارهای توسعه دهنده مؤلفه وب در Chrome با OffiDocs

شرح

ابزار توسعه دهنده برای مؤلفه های وب و کتابخانه های مؤلفه وب Web Component DevTools برای همه توسعه دهندگانی است که با مؤلفه های وب کار می کنند.

ابزار ارائه شده یک پانل جدید Chrome Devtools ایجاد می کند که امکان نگاهی سریع به عناصر سفارشی در صفحه فعلی را فراهم می کند و امکان اصلاح ویژگی ها و ویژگی های مؤلفه های مذکور را فراهم می کند.

Web Component DevTools از مانیفست عناصر سفارشی (https://github.

com/webcomponents/custom-elements-manifest) برای تجزیه و تحلیل اجزای وب.

ویژگی‌ها: Web Component DevTools ویژگی‌های پیشرفته‌ای را مستقیماً از رابط کاربری مرورگر به برنامه‌نویس ارائه می‌دهد، به‌عنوان مثال: - فهرست کردن عناصر سفارشی در صفحه، و iframe‌های قابل دسترس در داخل صفحه - فیلتر کردن عناصر سفارشی در فهرست - بازرسی و اصلاح ویژگی‌های عناصر سفارشی - بازرسی و اصلاح خصوصیات (حتی اشیاء و آرایه ها) عناصر سفارشی - مشاهده رویدادهای ارسال شده - فراخوانی توابع عنصر سفارشی و ثبت مقادیر بازگشتی - مشاهده کد منبع اجزای وب در صفحه - تعامل مستقیم با اجزای وب از طریق کنسول چرا؟ در فرآیند توسعه کامپوننت‌های وب، چه با کتابخانه‌ای مانند Lit یا بدون هیچ گونه کتابخانه‌ای، موقعیت‌هایی پیش می‌آید که ممکن است بخواهید کنترل بیشتری بر اجزای خود نسبت به آنچه که ابزارهای برنامه‌نویس مرورگر معمولی به شما می‌دهند، داشته باشید.

برای مثال ممکن است بخواهید: تغییر ویژگی های عنصر تغییر ویژگی های عنصر مانیتور هنگامی که رویدادها از عنصر ارسال می شوند توابع فراخوانی و زمانی که با Web Components کار می کنید، معمولاً Shadow DOM وجود دارد که کار را نسبتاً دشوار می کند. مسیر عنصر را پیدا کنید.

و حتی اگر مسیر را پیدا کردید، باید سند بنویسید.

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

setAttribute ("my-attr"، "foo") هر بار که می خواهید یک مقدار را تغییر دهید، بسیار دست و پا گیر است.

برای این مورد، Web Components DevTools ایجاد شد: برای اینکه توسعه دهنده بتواند به راحتی ویژگی ها، ویژگی ها و بنابراین وضعیت عنصر خود را مستقیماً از پنجره ابزار توسعه با کلیک یک دکمه تغییر دهد.

مشکلات: هر مشکلی که هنگام استفاده از DevTools با آن مواجه می شوید باید به مخزن GitHub ارسال شود (https://github.

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

اطلاعات اضافی:

- ارائه شده توسط Matsuuu
- میانگین امتیاز: 5 ستاره (آن را دوست داشتم)
- توسعه دهنده این آدرس ایمیل در مقابل هرزنامه ها محافظت می شود. دیدن شما نیاز به جاوا اسکریپت دارید

Web Component DevTools web extension با OffiDocs یکپارچه شده است Chromium آنلاین