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

Stats

By: Matsuuu

View on Chrome Web Store

Users: 6,000+

Rating: 5.00 (6)

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

URLs: Website

Stats date:

Chrome-Stats Rank

# 13302 ▼ 113

Other rankings

#688 in Developer Tools ▼ 2

#4 in component keyword 29 ▼ 2

#49 in modify keyword 39 ▼ 2

#92 in example keyword 2 ▲ 4

#109 in web keyword 87 ▲ 55

Upgrade to see more rankings

Other platforms

Not available on Firefox

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.

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

Excellent tool, gotta love the features it adds on top of Dev Tools

Elliott Marquez, 2021-07-27

This extension is amazing!!!

Arturo Guillén, 2021-07-13

Really helpful.

Bruce Anderson, 2021-07-08

View all user reviews

Safety

Risk impact

Web Component DevTools is risky to use as it requires a number of sensitive permissions that can potentially harm your browser and steal your data. Exercise caution when installing this extension. Review carefully before installing. We recommend that you only install Web Component DevTools if you trust the publisher.