Outils de développement de composants Web dans Chrome avec OffiDocs

DESCRIPTION

Outils de développement pour les composants Web et les bibliothèques de composants Web Web Component DevTools s'adresse à tous les développeurs travaillant avec des composants Web.

L'outil fourni crée un nouveau panneau Chrome Devtools, qui permet un aperçu rapide des éléments personnalisés sur la page actuelle, et permet la modification des attributs et des propriétés desdits composants.

Web Component DevTools utilise le manifeste des éléments personnalisés (https://github.

com/webcomponents/custom-elements-manifest) pour analyser les composants Web.

Fonctionnalités : Web Component DevTools fournit des fonctionnalités avancées au développeur, directement depuis l'interface utilisateur du navigateur, par exemple : - Liste des éléments personnalisés sur la page et des iframes accessibles à l'intérieur de la page - Filtrage des éléments personnalisés sur la liste - Inspecter et modifier les attributs de éléments personnalisés - Inspecter et modifier les propriétés (même les objets et les tableaux) des éléments personnalisés - Observer les événements distribués - Appeler les fonctions de l'élément personnalisé et consigner les valeurs de retour - Afficher le code source des composants Web sur la page - Interagir directement avec les composants Web via la console Pourquoi ? Dans le processus de développement de composants Web, que ce soit avec une bibliothèque comme Lit ou sans aucune sorte de bibliothèque, il arrive des situations dans lesquelles vous voudrez peut-être avoir un peu plus de contrôle sur vos composants que ce que vous offrent les outils de développement de navigateur habituels.

Vous pouvez, par exemple, vouloir : Basculer les attributs de l'élément Basculer les propriétés de l'élément Surveiller lorsque des événements sont envoyés depuis l'élément Appeler des fonctions Et lorsque vous travaillez avec des composants Web, Shadow DOM est généralement présent, ce qui rend assez difficile la trouver le chemin d'accès à l'élément.

Et même si vous avez le chemin, devoir écrire un document.

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

setAttribute("my-attr", "foo") chaque fois que vous souhaitez modifier une valeur est assez fastidieux.

Pour ce cas d'utilisation, les Web Components DevTools ont été créés : Pour permettre au développeur de modifier facilement les attributs, les propriétés et donc l'état de son élément directement depuis la fenêtre devtools en un clic sur un bouton.

Problèmes : tous les problèmes que vous rencontrez lors de l'utilisation de DevTools doivent être soumis au référentiel GitHub (https://github.

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

Informations supplémentaires:

- Offert par Matsuuu
- Note moyenne : 5 étoiles (j'ai adoré)
- Développeur cette adresse e-mail qui est protégée du spam. Vous devez activer JavaScript pour la voir.

Web Component DevTools extension intégré avec les OffiDocs Chromium en ligne