Web Component DevTools: Developer Tooling for Web Components and Web Component Libraries

Web Component DevTools is a developer tool aimed at those working with Web Components. This Chrome add-on creates a new panel in the Chrome Devtools, providing quick access to custom elements on the current page and allowing modification of their attributes and properties.

One of the standout features of Web Component DevTools is its ability to list custom elements on the page, including accessible iframes, and filter them for easy navigation. Developers can inspect and modify the attributes and properties of these custom elements, even handling complex objects and arrays. The tool also allows for observing dispatched events, calling functions of the custom element, and viewing the source code of web components on the page.

The motivation behind Web Component DevTools is to provide developers with more control over their components during the development of Web Components. With the tool, developers can easily toggle attributes and properties of elements, monitor event dispatches, and call functions directly from the devtools window. This is particularly useful when working with Web Components that utilize Shadow DOM, as it can be challenging to find and modify elements within the Shadow DOM structure.

If you encounter any issues while using Web Component DevTools, you can submit them to the GitHub Repository for the project.