Componente Web DevTools in Chrome con OffiDocs

DESCRIZIONE

Strumenti per sviluppatori per componenti Web e librerie di componenti Web Web Component DevTools è rivolto a tutti gli sviluppatori che lavorano con componenti Web.

Gli strumenti forniti creano un nuovo pannello Chrome Devtools, che consente una rapida occhiata agli elementi personalizzati nella pagina corrente e consente la modifica di attributi e proprietà di detti componenti.

Web Component DevTools utilizza il manifesto degli elementi personalizzati (https://github.

com/webcomponents/custom-elements-manifest) per analizzare i Web Components.

Funzionalità: Web Component DevTools fornisce funzionalità avanzate allo sviluppatore, direttamente dall'interfaccia utente del browser per, ad esempio: - Elenca elementi personalizzati sulla pagina e iframe accessibili all'interno della pagina - Filtraggio di elementi personalizzati nell'elenco - Ispezione e modifica degli attributi di elementi personalizzati - Ispezione e modifica delle proprietà (anche oggetti e matrici) degli elementi personalizzati - Osservazione degli eventi inviati - Funzioni di chiamata dell'elemento personalizzato e registrazione dei valori restituiti - Visualizza il codice sorgente dei componenti Web sulla pagina - Interagisci direttamente con i componenti Web attraverso la console Perché? Nel processo di sviluppo di Web Components, sia con una libreria come Lit, sia senza alcun tipo di libreria, ci sono situazioni in cui potresti voler avere un po' più di controllo sui tuoi componenti rispetto a quello che ti danno i normali devtools del browser.

Ad esempio, potresti voler: Attivare/disattivare gli attributi dell'elemento Attivare/disattivare le proprietà dell'elemento Monitorare quando gli eventi vengono inviati dall'elemento Funzioni di chiamata E quando lavori con i componenti Web, Shadow DOM di solito è presente, rendendo abbastanza difficile trovare il percorso dell'elemento.

E anche se hai il percorso, devi scrivere un documento.

querySelector("stringa-mio-selettore > nome-elemento").

setAttribute("my-attr", "foo") ogni volta che si desidera modificare un valore è piuttosto ingombrante.

Per questo caso d'uso sono stati creati i Web Components DevTools: per consentire allo sviluppatore di modificare facilmente gli attributi, le proprietà e quindi lo stato del loro elemento direttamente dalla finestra di devtools con il clic di un pulsante.

Problemi: eventuali problemi riscontrati durante l'utilizzo di DevTools devono essere inviati al repository GitHub (https://github.

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

Informazioni aggiuntive:

- Offerto da Matsuuu
- Valutazione media: 5 stelle (mi è piaciuto molto)
- Sviluppatore Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo.

Componente Web DevTools web extension integrato con OffiDocs Chromium online