# Web Component DevTools

> Developer tooling for Web Components and Web Component Libraries

Canonical page: [https://chrome-stats.com/d/web-component-devtools](https://chrome-stats.com/d/web-component-devtools)

## Overview

- **ID:** `web-component-devtools`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Matsuuu
- **Category:** web-development,appearance
- **Daily users:** 978
- **Weekly downloads:** 19
- **Rating:** 5.00 / 5 (5 ratings)
- **Version:** 0.1.17
- **Last updated:** 2022-06-20
- **First published:** 2021-07-16
- **Size:** 1.77 MB
- **Data as of:** 2026-09-05
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/web-component-devtools/)
- **Website:** [https://matsuuu.github.io/web-component-devtools/](https://matsuuu.github.io/web-component-devtools/)

## Description

Web Component DevTools is a specialized Chrome extension designed for developers working with Web Components and Web Component libraries like Lit. It integrates directly into Chrome DevTools, providing a dedicated panel that lists all custom elements on the current page and accessible iframes.

With this tool, developers can easily inspect and modify attributes and properties (including complex objects and arrays) of custom elements, observe dispatched events, and invoke methods with return logging. Managing Shadow DOM elements becomes less cumbersome by eliminating the need for verbose selector commands. Web Component DevTools leverages the Custom Elements Manifest to analyze components, enhancing debugging and development workflows directly through the browser UI.

## Rankings

- #3,344 — Overall
- #373 — Web Development
- #2 — component
- #37 — tools
- #56 — come
- #70 — web

## Permissions and access

### Permissions

- `tabs`
- `contextMenus`

### Content script matches

- `<all_urls>`

## Safety

- **Risk impact:** High risk impact
- **Risk likelihood:** Low risk likelihood

### Analysis details

- Grants access to browser tabs, which can be used to track user browsing habits and history, presenting a privacy concern.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Blazor Developer Tools](https://chrome-stats.com/d/blazor-developer-tools) — 8 users
- [KonvaJS Devtools](https://chrome-stats.com/d/konvajs-devtools) — 28 users
- [Carbon Devtools](https://chrome-stats.com/d/carbondevtools) — 19 users
- [MobiDevTools](https://chrome-stats.com/d/mobidevtools) — 8,217 users, 3.93 / 5
- [Tailwind CSS Devtools](https://chrome-stats.com/d/tailwind-css-devtools) — 377 users, 5.00 / 5
- [DevScope - Developer Diagnostics](https://chrome-stats.com/d/devscope) — 2 users
- [Right On Page Devtools](https://chrome-stats.com/d/right-on-page-devtools) — 1 users
- [Umbraco DevTools](https://chrome-stats.com/d/umbraco-devtools) — 2 users
- [Ext JS 3 DevTools](https://chrome-stats.com/d/ext-js-3-devtools) — 4 users
- [Gripper - DevTools for Designers](https://chrome-stats.com/d/gripper-devtools-for-designers) — 3 users
- [onHover — Developer Toolkit](https://chrome-stats.com/d/onhover-developer-toolkit) — 2 users
- [Svelte Devtools](https://chrome-stats.com/d/svelte-devtools) — 1,261 users, 4.17 / 5

---

Source: [Chrome-Stats](https://chrome-stats.com/d/web-component-devtools)