Web Component DevTools
Item logo image for Web Component DevTools

Web Component DevTools

Featured
4.2(

8 ratings

)
Item media 1 screenshot
Item media 2 screenshot

Overview

Developer tooling for Web Components and Web Component Libraries

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 - Calling functions of the custom element, and logging the return values - View the source code of web components on page - Interact directly with web components through the console 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: Toggle the Attributes of the element Toggle the Properties of the element Monitor when events get dispatched from the element Call functions 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. 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).

4.2 out of 58 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Amine MaghousMay 12, 2024

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

Review's profile picture

Nigel SimApr 30, 2024

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.

1 person found this review to be unhelpful
Review's profile picture

Elliott MarquezJul 27, 2021

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

1 person found this review to be helpful

Details

  • Version
    0.2.2
  • Updated
    February 1, 2023
  • Offered by
    Matsuuu
  • Size
    1.74MiB
  • Languages
    English
  • Developer
    Email
    huhta.matias@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

VisBug

4.8(236)

Open source browser design tools

DOM Treemap

5.0(3)

Helps you explore the distribution of DOM nodes in the document tree.

CSS Stacking Context inspector

3.9(19)

Helps inspecting the css stacking contexts and solving the z-index war.

axe DevTools - Web Accessibility Testing

4.0(109)

Accessibility Checker for Developers, Testers, and Designers in Chrome

Dev Tools

5.0(1)

Collection of Handy tools for web/developers!

Preact Developer Tools

5.0(10)

Adds debugging tools for Preact to Chrome

Custom Elements Locator

5.0(3)

This extension will find any custom element on a page.

Chrome Devtools Styler

5.0(6)

Change Chrome Devtool Styles

Web Vitals

4.1(40)

Measure metrics for a healthy site

Refined GitHub

4.8(189)

Simplifies the GitHub interface and adds useful features

Lit Prism

5.0(6)

Inspect Lit or Polymer webcomponents 'through a prism'. View and modify component properties on the fly through Chrome DevTools.

DevTools Author

3.9(117)

A selection of author settings for Chrome Developer Tools.

VisBug

4.8(236)

Open source browser design tools

DOM Treemap

5.0(3)

Helps you explore the distribution of DOM nodes in the document tree.

CSS Stacking Context inspector

3.9(19)

Helps inspecting the css stacking contexts and solving the z-index war.

axe DevTools - Web Accessibility Testing

4.0(109)

Accessibility Checker for Developers, Testers, and Designers in Chrome

Dev Tools

5.0(1)

Collection of Handy tools for web/developers!

Preact Developer Tools

5.0(10)

Adds debugging tools for Preact to Chrome

Custom Elements Locator

5.0(3)

This extension will find any custom element on a page.

Chrome Devtools Styler

5.0(6)

Change Chrome Devtool Styles

Google apps