Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers
Web Component DevTools is aimed at all developers working with Web Components. The tooling provided creates a new Chrome Devtools panel, which allows a quick look at the custom elements on the current page, and enables modification of attributes and properties of said components.
In the process of developing Web Components, wether it be with a library like Lit, or without any kind of library, there comes situtations in which you might want to have a bit more control over your components than what the regular browser devtools gives you.
You might for example want to:
And when you're working with Web Components, Shadow DOM usually is present, making it fairly difficult to find the path to the element. And even if
you got the path, having to write document.querySelector("my-selector-string > element-name").setAttribute("my-attr", "foo")
every time you want to
modify a value is quite cumbersome.
For this use case the Web Components DevTools were created: To enable the developer to easily modify the attributes, properties and therefore state of their element straight from the devtools window with the click of a button.
Web Component DevTools provides advanced features to the developer, straight from the browser's UI to, for example:
You can get the Web Component DevTools from the Chrome Web Store and the Mozilla Add-on marketplace
To get started with WCDT, you only need to install the extension into your browser, and you should be able to see a "Web Components" -panel on your devtols window.
A brief video of setting up your development environment to get the most out of DevTools: https://youtu.be/D6W5iX3-E9E
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
Any issues you run into while using the DevTools should be submitted to the GitHub Repository (https://github.com/Matsuuu/web-component-devtools/issues).
Join the discussion in Lit and Friends slack in the channel #web-component-devtools
Join here: https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw
The current architecture of the project goes as follow:
html => Pages of the devtools
lib => All of the extension code, excluding html pages, and packages
context-menus.js => Context menu actions and communication
devtools.js => Panel and general initialization actions. Lifecycle callbacks
Packages => Separate tools used for WCDT, maybe later on built into their own tools
Required tools:
If you want to develop or use the devtools locally, you can do so by following these steps:
npm install
npm run build
dist
-directory in the project folderFor firefox, you might need to create a zip of the dist
-folder to ad it to firefox as an extension.
Feel free to use whatever zip tool you want to zip the dist
-folder.
There is a combination script called npm run package
which builds the project, and packages it utilizing the zip
command line tool for linux.