Web Component DevTools în Chrome cu OffiDocs

DESCRIERE

Instrumentele pentru dezvoltatori pentru componente web și biblioteci de componente web Web Component DevTools se adresează tuturor dezvoltatorilor care lucrează cu componente web.

Instrumentele furnizate creează un nou panou Chrome Devtools, care permite o privire rapidă asupra elementelor personalizate din pagina curentă și permite modificarea atributelor și proprietăților componentelor menționate.

Web Component DevTools utilizează Manifestul elementelor personalizate (https://github.

com/webcomponents/custom-elements-manifest) pentru a analiza Componentele Web.

Caracteristici: Web Component DevTools oferă dezvoltatorului caracteristici avansate, direct din interfața de utilizare a browserului pentru, de exemplu: - Listarea elementelor personalizate pe pagină și iframe accesibile în interiorul paginii - Filtrarea elementelor personalizate din listă - Inspectarea și modificarea atributelor elemente personalizate - Inspectarea și modificarea proprietăților (chiar și obiecte și matrice) ale elementelor personalizate - Observarea evenimentelor expediate - Apelarea funcțiilor elementului personalizat și înregistrarea valorilor returnate - Vizualizați codul sursă al componentelor web pe pagină - Interacționați direct cu componentele web prin consola De ce? În procesul de dezvoltare a componentelor web, fie că este vorba de o bibliotecă precum Lit, sau fără nici un fel de bibliotecă, apar situații în care s-ar putea să doriți să aveți un control puțin mai mare asupra componentelor dvs. decât ceea ce vă oferă instrumentele de dezvoltare obișnuite ale browserului.

De exemplu, ați putea dori să: Comutați atributele elementului Comutați proprietățile elementului Monitorizați când evenimentele sunt trimise din element Apelați funcții Și când lucrați cu componente Web, Shadow DOM este de obicei prezent, ceea ce face destul de dificil să găsiți calea către element.

Și chiar dacă ați primit calea, trebuind să scrieți documentul.

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

setAttribute("my-attr", "foo") de fiecare dată când doriți să modificați o valoare este destul de greoaie.

Pentru acest caz de utilizare au fost create Web Components DevTools: Pentru a permite dezvoltatorului să modifice cu ușurință atributele, proprietățile și, prin urmare, starea elementului lor direct din fereastra devtools cu un clic pe un buton.

Probleme: Orice probleme pe care le întâmpinați în timp ce utilizați DevTools ar trebui trimise la depozitul GitHub (https://github.

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

Informații suplimentare:

- Oferit de Matsuuu
- Evaluare medie: 5 stele (mi-a placut)
- Dezvoltator Această adresă de e-mail este protejată de spamboți. Aveți nevoie de activarea JavaScript-ului pentru ao vizualiza.

Web Component DevTools web extension integrat cu OffiDocs Chromium on-line