Web Component DevTools

Developer tooling for Web Components and Web Component Libraries

What is Web Component DevTools?

"Web Component DevTools" is a Chrome extension designed to enhance the work efficiency of developers handling Web Components. This tool creates a new Chrome Devtools panel for quick identification and modification of custom elements, their properties, and attributes on a given page. It allows the developer to directly interact with web components, view source code, call functions, and observe dispatched events, right from the browser's UI."

Download

Extension stats

By: Matsuuu

View on Chrome Web Store

Users: 7,000+

Rating: 4.33 (9)

Version: 0.2.2 (Last updated: 2023-02-02)

Creation date: 2021-07-06

Risk impact: High risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

tabs
contextMenus
scripting

Host permissions:

<all_urls>

Size: 1.82M

Email: hu*****@gmail.com

Ranking

# 12651 ▼ 39

Other rankings

#787 in Developer Tools

#2 in component keyword 11

#54 in modify keyword 31

#124 in example keyword 2 ▼ 2

#145 in developer keyword 63 ▼ 4

Upgrade to see more rankings

Other platforms

Web Component DevTools (v0.1.17)

5.00

(5) 1,198+

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

Developer tooling for Web Components and Web Component Libraries 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.

Web Component DevTools utilizes the Custom Elements Manifest (https://github.com/webcomponents/custom-elements-manifest) to analyze the Web Components.

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 (even objects and arrays) of custom elements
Observing dispatched events

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros