Web Component DevTools بتنسيق Chrome مع OffiDocs

الوصف

أدوات المطورين لمكونات الويب ومكتبات مكونات الويب Web Component DevTools موجهة لجميع المطورين الذين يعملون مع Web Components.

تعمل الأدوات المقدمة على إنشاء لوحة Chrome Devtools جديدة ، والتي تسمح بإلقاء نظرة سريعة على العناصر المخصصة في الصفحة الحالية ، وتمكن من تعديل سمات وخصائص المكونات المذكورة.

تستخدم Web Component DevTools بيان العناصر المخصصة (https: // github.

com / webcomponents / custom-element-manifest) لتحليل مكونات الويب.

الميزات: يوفر Web Component DevTools ميزات متقدمة للمطور ، مباشرة من واجهة مستخدم المتصفح إلى ، على سبيل المثال: - إدراج العناصر المخصصة في الصفحة ، وإطارات iframe التي يمكن الوصول إليها داخل الصفحة - تصفية العناصر المخصصة في القائمة - فحص وتعديل سمات العناصر المخصصة - فحص وتعديل الخصائص (حتى الكائنات والمصفوفات) للعناصر المخصصة - مراقبة الأحداث المرسلة - وظائف استدعاء العنصر المخصص وتسجيل قيم الإرجاع - عرض الكود المصدري لمكونات الويب على الصفحة - التفاعل مباشرة مع مكونات الويب من خلال وحدة التحكم لماذا؟ في عملية تطوير Web Components ، سواء أكان ذلك مع مكتبة مثل Lit ، أو بدون أي نوع من المكتبات ، هناك مواقع قد ترغب في التحكم فيها قليلاً في مكوناتك أكثر مما توفره لك أدوات تطوير المتصفح العادية.

قد ترغب على سبيل المثال في: تبديل سمات العنصر تبديل خصائص العنصر مراقب عندما يتم إرسال الأحداث من عنصر وظائف الاتصال وعندما تعمل مع مكونات الويب ، يكون Shadow DOM موجودًا عادة ، مما يجعل من الصعب إلى حد ما ابحث عن المسار إلى العنصر.

وحتى لو حصلت على المسار ، عليك كتابة مستند.

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

setAttribute ("my-attr"، "foo") في كل مرة تريد فيها تعديل قيمة أمر مرهق للغاية.

لحالة الاستخدام هذه ، تم إنشاء Web Components DevTools: لتمكين المطور من تعديل السمات والخصائص بسهولة وبالتالي حالة عنصرها مباشرة من نافذة devtools بنقرة زر واحدة.

المشكلات: يجب إرسال أي مشكلات تواجهها أثناء استخدام DevTools إلى مستودع GitHub (https: // github.

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

معلومات إضافية:

- مقدمة من Matsuuu
- متوسط ​​التقييم: 5 نجوم (أحببته)
- مطور محمي عنوان البريد الإلكتروني هذا من المتطفلين و برامج التطفل. تحتاج إلى تفعيل جافا سكريبت لتتمكن من مشاهدته.

Web Component DevTools على الويب extension متكامل مع OffiDocs Chromium online