Herramientas de desarrollo de componentes web en Chrome con OffiDocs

DESCRIPCIÓN

Herramientas de desarrollador para componentes web y bibliotecas de componentes web Web Component DevTools está dirigido a todos los desarrolladores que trabajan con componentes web.

Las herramientas proporcionadas crean un nuevo panel Chrome Devtools, que permite un vistazo rápido a los elementos personalizados en la página actual y permite la modificación de atributos y propiedades de dichos componentes.

Web Component DevTools utiliza el manifiesto de elementos personalizados (https://github.

com/webcomponents/custom-elements-manifest) para analizar los componentes web.

Funciones: Web Component DevTools proporciona funciones avanzadas al desarrollador, directamente desde la interfaz de usuario del navegador para, por ejemplo: - Listar elementos personalizados en la página e iframes accesibles dentro de la página - Filtrar elementos personalizados en la lista - Inspeccionar y modificar los atributos de elementos personalizados - Inspeccionar y modificar las propiedades (incluso objetos y matrices) de elementos personalizados - Observar eventos enviados - Llamar funciones del elemento personalizado y registrar los valores de retorno - Ver el código fuente de los componentes web en la página - Interactuar directamente con los componentes web a través de la consola ¿Por qué? En el proceso de desarrollo de componentes web, ya sea con una biblioteca como Lit o sin ningún tipo de biblioteca, surgen situaciones en las que es posible que desee tener un poco más de control sobre sus componentes que el que le brindan las herramientas de desarrollo habituales del navegador.

Por ejemplo, es posible que desees: Alternar los atributos del elemento Alternar las propiedades del elemento Monitorear cuándo se envían eventos desde el elemento Llamar a funciones Y cuando trabajas con componentes web, Shadow DOM generalmente está presente, lo que hace que sea bastante difícil encontrar el camino al elemento.

E incluso si tienes el camino, tendrás que escribir el documento.

querySelector("mi-cadena-selector > nombre-elemento").

setAttribute("my-attr", "foo") cada vez que desea modificar un valor es bastante engorroso.

Para este caso de uso se crearon Web Components DevTools: para permitir al desarrollador modificar fácilmente los atributos, propiedades y, por lo tanto, el estado de su elemento directamente desde la ventana devtools con solo hacer clic en un botón.

Problemas: cualquier problema que surja al utilizar DevTools debe enviarse al repositorio de GitHub (https://github.

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

Información adicional:

- Ofrecido por Matsuuu
- Calificación promedio: 5 estrellas (me encantó)
- Desarrollador Esta dirección de correo electrónico está protegida contra robots de spam. Es necesario activar Javascript para visualizarla.

Web Componente DevTools web extension integrado con OffiDocs Chromium en línea