Web Component DevTools

Web Component DevTools

Developer tooling for Web Components and Web Component Libraries

  • Web Component DevTools
  • Web Component DevTools
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."
Stats
By: Matsuuu
Users: 6,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
Stats date:

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.
Chrome-Stats extension
Summary

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
See more
User reviews
by jagathiswaran t jagathiswaran t, 2024-07-02

The app looks very promising I just discovered it, but It's very slow when you click to analyze a component, taking minutes to finish
by Amine Maghous Amine Maghous, 2024-05-12

0.2.2 didn't detect the web components I was trying to understand. It also overrode the `throttle` method from my application, causing all kinds of strange issues.
by Nigel Sim Nigel Sim, 2024-04-30
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.

Risk likelihood

Web Component DevTools has earned a good reputation and can be trusted.

Upgrade to see risk analysis details
Similar extensions

Here are some Chrome extensions that are similar to Web Component DevTools: