Web Component DevTools in Chrome met OffiDocs

PRODUCTBESCHRIJVING

Tooling voor ontwikkelaars voor Web Components en Web Component Libraries Web Component DevTools is bedoeld voor alle ontwikkelaars die met Web Components werken.

De geleverde tooling creëert een nieuw Chrome Devtools-paneel, waarmee snel de aangepaste elementen op de huidige pagina kunnen worden bekeken en waarmee attributen en eigenschappen van genoemde componenten kunnen worden gewijzigd.

Web Component DevTools maakt gebruik van het Custom Elements Manifest (https://github.

com/webcomponents/custom-elements-manifest) om de webcomponenten te analyseren.

Functies: Web Component DevTools biedt geavanceerde functies voor de ontwikkelaar, rechtstreeks vanuit de gebruikersinterface van de browser, bijvoorbeeld voor: - Opsomming van aangepaste elementen op de pagina en toegankelijke iframes binnen de pagina - Filtering van aangepaste elementen op de lijst - Inspecteren en wijzigen van de kenmerken van aangepaste elementen - Inspecteren en wijzigen van de eigenschappen (zelfs objecten en arrays) van aangepaste elementen - Observeren van verzonden gebeurtenissen - Oproepen van functies van het aangepaste element en loggen van de geretourneerde waarden - Bekijk de broncode van webcomponenten op de pagina - Interactie rechtstreeks met webcomponenten via de console Waarom? Tijdens het ontwikkelen van webcomponenten, of het nu met een bibliotheek zoals Lit is of zonder enige vorm van bibliotheek, komen er situaties waarin u misschien wat meer controle over uw componenten wilt hebben dan wat de reguliere browser devtools u geven.

U kunt bijvoorbeeld het volgende doen: De kenmerken van het element omschakelen De eigenschappen van het element omschakelen Monitoren wanneer gebeurtenissen vanuit het element worden verzonden Functies aanroepen En wanneer u met webcomponenten werkt, is meestal Shadow DOM aanwezig, waardoor het redelijk moeilijk is om het pad naar het element te vinden.

En zelfs als je het pad hebt, moet je een document schrijven.

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

setAttribute("my-attr", "foo") elke keer dat u een waarde wilt wijzigen is nogal omslachtig.

Voor deze use case zijn de Web Components DevTools gemaakt: om de ontwikkelaar in staat te stellen de attributen, eigenschappen en dus de status van hun element eenvoudig rechtstreeks vanuit het devtools-venster te wijzigen met één klik op de knop.

Problemen: alle problemen die u tegenkomt tijdens het gebruik van DevTools, moeten worden ingediend bij de GitHub Repository (https://github.

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

Extra informatie:

- Aangeboden door Matsuuu
- Gemiddelde beoordeling: 5 sterren (vond het geweldig)
- Ontwikkelaar Dit e-mailadres is beschermd tegen spambots. U heeft Javascript nodig om het te kunnen zien.

Webcomponent DevTools web extension geïntegreerd met de OffiDocs Chromium online.