Tools: Web Component DevTools
While the developer tools provided by modern browsers are effective, they aren't completely tailored for Web Component development.
Attributes can be viewed in the devtools Element window, but modifying them can get quite cumbersome, especially if you're adding a new attribute.
A more tailored set of tooling has been created going by the name Web Component DevTools.
Features
Web Component DevTools provides advanced features to the developer, straight from the browser's UI to, for example:
- Listing custom elements on the page, and accessible iframes inside the page
- Filtering custom elements on the list
- Inspecting and modifying the attributes of custom elements
- Inspecting and modifying the properties of custom elements
- Observing dispatched events
- Calling functions of the custom element
Supported libraries
Web Component DevTools also works with libraries built for developing Web Components. Currently the libraries, with extra support by DevTools are:
When developing with these libraries, the feature set of the devtools is increased, without the addition of the Custom Elements Manifest.
Extra features provided for these libraries include for example inspecting and editing of the properties of custom elements.
The list of extra support libraries will grow as adoption grows
Download
You can find the most up to date information from the Web Component DevTools web page
You can get the Web Component DevTools from the Chrome Web Store
And from the Firefox Addons Catalog
Setting up
A brief video of showcasing the features and steps on setting up your development environment to get the most out of DevTools can be found in Youtube