Home

Awesome

Web Component DevTools

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.

Why?

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.

Features

Web Component DevTools provides advanced features to the developer, straight from the browser's UI to, for example:

Download

You can get the Web Component DevTools from the Chrome Web Store and the Mozilla Add-on marketplace

Setting up

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


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

Issues:

Any issues you run into while using the DevTools should be submitted to the GitHub Repository (https://github.com/Matsuuu/web-component-devtools/issues).

Discussion

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

Architecture

The current architecture of the project goes as follow:

Local Development

Required tools:


If you want to develop or use the devtools locally, you can do so by following these steps:

  1. Clone this repository
  2. Run npm install
  3. run npm run build
  4. Go to Chrome Extensions
  5. Enable Developer mode
  6. Choose "Load Unpacked"
  7. Select the generated dist -directory in the project folder

Firefox

For 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.

Generating a full package

There is a combination script called npm run package which builds the project, and packages it utilizing the zip command line tool for linux.