Web Component DevTools in Chrome mit OffiDocs

BESCHREIBUNG

Entwicklertools für Webkomponenten und Webkomponentenbibliotheken Web Component DevTools richtet sich an alle Entwickler, die mit Webkomponenten arbeiten.

Die bereitgestellten Tools erstellen ein neues Chrome Devtools-Bedienfeld, das einen schnellen Blick auf die benutzerdefinierten Elemente auf der aktuellen Seite ermöglicht und die Änderung von Attributen und Eigenschaften dieser Komponenten ermöglicht.

Web Component DevTools nutzt das Custom Elements Manifest (https://github.

com/webcomponents/custom-elements-manifest), um die Webkomponenten zu analysieren.

Funktionen: Web Component DevTools bietet dem Entwickler erweiterte Funktionen direkt über die Benutzeroberfläche des Browsers, zum Beispiel: – Auflisten benutzerdefinierter Elemente auf der Seite und zugänglicher Iframes innerhalb der Seite – Filtern benutzerdefinierter Elemente in der Liste – Überprüfen und Ändern der Attribute von Benutzerdefinierte Elemente – Überprüfen und Ändern der Eigenschaften (sogar Objekte und Arrays) von benutzerdefinierten Elementen – Beobachten ausgelöster Ereignisse – Aufrufen von Funktionen des benutzerdefinierten Elements und Protokollieren der Rückgabewerte – Anzeigen des Quellcodes von Webkomponenten auf der Seite – Direkte Interaktion mit Webkomponenten über die Konsole Warum? Im Prozess der Entwicklung von Webkomponenten, sei es mit einer Bibliothek wie Lit oder ohne jede Art von Bibliothek, gibt es Situationen, in denen Sie möglicherweise etwas mehr Kontrolle über Ihre Komponenten haben möchten, als Ihnen die regulären Browser-Devtools bieten.

Sie könnten beispielsweise Folgendes tun: Die Attribute des Elements umschalten. Die Eigenschaften des Elements umschalten. Überwachen, wenn Ereignisse vom Element gesendet werden. Funktionen aufrufen. Und wenn Sie mit Webkomponenten arbeiten, ist normalerweise Shadow DOM vorhanden, was dies ziemlich schwierig macht Finden Sie den Pfad zum Element.

Und selbst wenn Sie den Weg gefunden haben, müssen Sie ein Dokument schreiben.

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

setAttribute("my-attr", "foo") jedes Mal, wenn Sie einen Wert ändern möchten, ist ziemlich umständlich.

Für diesen Anwendungsfall wurden die Web Components DevTools erstellt: Damit der Entwickler die Attribute, Eigenschaften und damit den Status seines Elements einfach per Knopfdruck direkt aus dem Devtools-Fenster ändern kann.

Probleme: Alle Probleme, auf die Sie bei der Verwendung der DevTools stoßen, sollten an das GitHub-Repository (https://github.com) übermittelt werden.

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

Zusätzliche Information:

- Angeboten von Matsuuu
- Durchschnittliche Bewertung: 5 Sterne (liebte es)
- Entwickler Diese E-Mail-Adresse ist gegen Spambots geschützt. Sie müssen JavaScript aktivieren, damit Sie sie sehen können.

Webkomponente DevTools-Web extension integriert mit den OffiDocs Chromium Online