Web Component DevTools em Chrome com OffiDocs

DESCRIÇÃO

Ferramentas de desenvolvedor para Web Components e Bibliotecas de Web Components O Web Component DevTools destina-se a todos os desenvolvedores que trabalham com Web Components.

A ferramenta fornecida cria um novo painel Chrome Devtools, que permite uma rápida visão dos elementos personalizados da página atual e permite a modificação de atributos e propriedades desses componentes.

Web Component DevTools utiliza o Manifesto de Elementos Personalizados (https://github.

com/webcomponents/custom-elements-manifest) para analisar os Web Components.

Recursos: Web Component DevTools fornece recursos avançados ao desenvolvedor, diretamente da UI do navegador para, por exemplo: - Listar elementos personalizados na página e iframes acessíveis dentro da página - Filtrar elementos personalizados na lista - Inspecionar e modificar os atributos de elementos personalizados - Inspecionar e modificar as propriedades (até mesmo objetos e matrizes) de elementos personalizados - Observar eventos despachados - Chamar funções do elemento personalizado e registrar os valores de retorno - Visualizar o código-fonte dos componentes da web na página - Interagir diretamente com os componentes da web através do console Por quê? No processo de desenvolvimento de Web Components, seja com uma biblioteca como o Lit, ou sem qualquer tipo de biblioteca, surgem situações em que você pode querer ter um pouco mais de controle sobre seus componentes do que os devtools normais do navegador oferecem.

Você pode querer, por exemplo: Alternar os atributos do elemento Alternar as propriedades do elemento Monitorar quando os eventos são despachados do elemento Chamar funções E quando você está trabalhando com componentes da Web, o Shadow DOM geralmente está presente, tornando bastante difícil encontre o caminho para o elemento.

E mesmo que você tenha conseguido o caminho, ter que escrever um documento.

querySelector("my-selector-string > nome do elemento").

setAttribute("my-attr", "foo") toda vez que você deseja modificar um valor é bastante complicado.

Para este caso de uso foram criados os DevTools de Web Components: Para permitir ao desenvolvedor modificar facilmente os atributos, propriedades e, portanto, o estado de seu elemento diretamente da janela devtools com o clique de um botão.

Problemas: quaisquer problemas que você encontrar ao usar o DevTools devem ser enviados ao Repositório GitHub (https://github.

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

Informação adicional:

- Oferecido por Matsuuu
- Avaliação média: 5 estrelas (adorei)
- Desenvolvedor Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo.

Web Component DevTools web extension integrado com o OffiDocs Chromium online