Web Component DevTools ב Chrome עם OffiDocs

תיאור

כלי מפתחים עבור רכיבי אינטרנט וספריות רכיבי אינטרנט Web Component DevTools מיועד לכל המפתחים העובדים עם רכיבי אינטרנט.

הכלי שסופק יוצר חלונית חדשה של Chrome Devtools, המאפשרת מבט מהיר על האלמנטים המותאמים אישית בדף הנוכחי, ומאפשרת שינוי של תכונות ומאפיינים של הרכיבים האמורים.

Web Component DevTools משתמש במניפסט האלמנטים המותאמים אישית (https://github.

com/webcomponents/custom-elements-manifest) כדי לנתח את רכיבי האינטרנט.

מאפיינים: Web Component DevTools מספק תכונות מתקדמות למפתח, היישר ממשק המשתמש של הדפדפן לדוגמא: - רישום אלמנטים מותאמים אישית בדף, ו-iframes נגישים בתוך הדף - סינון אלמנטים מותאמים אישית ברשימה - בדיקה ושינוי של התכונות של אלמנטים מותאמים אישית - בדיקה ושינוי המאפיינים (אפילו אובייקטים ומערכים) של אלמנטים מותאמים אישית - צפייה באירועים שנשלחו - קריאה לפונקציות של האלמנט המותאם אישית, ורישום ערכי ההחזרה - הצג את קוד המקור של רכיבי אינטרנט בדף - אינטראקציה ישירה עם רכיבי אינטרנט דרך הקונסולה למה? בתהליך הפיתוח של רכיבי אינטרנט, בין אם זה יהיה עם ספרייה כמו Lit, או ללא כל סוג של ספרייה, יש מצבים שבהם אולי תרצה לשלוט במעט יותר על הרכיבים שלך ממה שמכשירי הדפדפן הרגילים נותנים לך.

אולי תרצה למשל: להחליף את התכונות של האלמנט להחליף את המאפיינים של האלמנט לפקח כאשר אירועים נשלחים מהאלמנט Call functions וכאשר אתה עובד עם Web Components, 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 כוכבים (אהבתי את זה)
- מפתח כתובת דוא"ל זו מוגנת מפני spambots. אתה צריך לאפשר Javascript בכדי לצפות בה.

Web Component DevTools אינטרנט extension משולב עם ה-OffiDocs Chromium באינטרנט