{"id":15099512,"url":"https://github.com/matsuuu/web-component-devtools","last_synced_at":"2025-07-21T12:05:10.304Z","repository":{"id":38142223,"uuid":"370244431","full_name":"Matsuuu/web-component-devtools","owner":"Matsuuu","description":"Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers","archived":false,"fork":false,"pushed_at":"2024-09-21T18:14:07.000Z","size":32590,"stargazers_count":139,"open_issues_count":20,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-03T20:33:43.119Z","etag":null,"topics":["chrome","custom-elements","extension","hacktoberfest","javascript","lit","typescript","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://matsuuu.github.io/web-component-devtools/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matsuuu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["matsuuu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-05-24T06:01:20.000Z","updated_at":"2025-03-16T10:48:22.000Z","dependencies_parsed_at":"2024-11-13T01:41:32.844Z","dependency_job_id":null,"html_url":"https://github.com/Matsuuu/web-component-devtools","commit_stats":{"total_commits":395,"total_committers":1,"mean_commits":395.0,"dds":0.0,"last_synced_commit":"f633aa3cb76467bfe233263b36475889e66c53ff"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/Matsuuu/web-component-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fweb-component-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fweb-component-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fweb-component-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fweb-component-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matsuuu","download_url":"https://codeload.github.com/Matsuuu/web-component-devtools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matsuuu%2Fweb-component-devtools/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266296815,"owners_count":23907015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","custom-elements","extension","hacktoberfest","javascript","lit","typescript","web-components","webcomponents"],"created_at":"2024-09-25T17:22:27.760Z","updated_at":"2025-07-21T12:05:10.230Z","avatar_url":"https://github.com/Matsuuu.png","language":"JavaScript","funding_links":["https://github.com/sponsors/matsuuu"],"categories":[],"sub_categories":[],"readme":"# Web Component DevTools\n\nWeb Component DevTools is aimed at all developers working with Web Components. \nThe 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.\n\n## Why?\n\nIn the process of developing Web Components, wether it be with a library like [Lit](https://github.com/lit/lit/), or without any kind of library,\nthere comes situtations in which you might want to have a bit more control over your components than what the regular browser devtools gives you.\n\nYou might for example want to:\n\n- Toggle the Attributes of the element\n- Toggle the Properties of the element\n- Monitor when events get dispatched from the element\n- Call functions\n\nAnd 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 \nyou got the path, having to write `document.querySelector(\"my-selector-string \u003e element-name\").setAttribute(\"my-attr\", \"foo\")` every time you want to\nmodify a value is quite cumbersome.\n\nFor this use case the Web Components DevTools were created: To enable the developer to easily modify the attributes, properties and therefore state\nof their element straight from the devtools window with the click of a button.\n\n## Features\n\nWeb Component DevTools provides advanced features to the developer, straight from the browser's UI to, for example:\n\n- Listing custom elements on the page, and accessible iframes inside the page\n- Filtering custom elements on the list\n- Inspecting and modifying the attributes of custom elements\n- Inspecting and modifying the properties of custom elements\n- Observing dispatched events\n- Calling functions of the custom element\n- View the source code of web components on page\n- Interact directly with web components through the console\n\n## Download\n\nYou can get the Web Component DevTools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-component-devtools/gdniinfdlmmmjpnhgnkmfpffipenjljo/related) and the [Mozilla Add-on marketplace](https://addons.mozilla.org/en-US/firefox/addon/web-component-devtools/)\n\n### Setting up\n\nTo get started with WCDT, you only need to install the extension into your browser, and you should be able to see a \"Web Components\" -panel\non your devtols window.\n\nA brief video of setting up your development environment to get the most out of DevTools: https://youtu.be/D6W5iX3-E9E\n\n---\n\n### Supported libraries\n\nWeb Component DevTools also works with libraries built for developing Web Components. Currently the libraries, with extra support by DevTools are:\n\n-   [Lit](https://github.com/lit/lit/)\n-   [FAST](https://www.fast.design/)\n-   [Atomico](https://atomicojs.github.io/)\n-   [Polymer](https://polymer-library.polymer-project.org/)\n-   [Vaadin](https://vaadin.com/)\n\nWhen developing with these libraries, the feature set of the devtools is increased, without the addition of the Custom Elements Manifest.\n\nExtra features provided for these libraries include for example inspecting and editing of the properties of custom elements.\n\nThe list of extra support libraries will grow as adoption grows\n\n## Issues:\n\nAny issues you run into while using the DevTools should be submitted to the GitHub Repository (https://github.com/Matsuuu/web-component-devtools/issues).\n\n\n## Discussion\n\nJoin the discussion in Lit and Friends slack in the channel #web-component-devtools\n\nJoin here: https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw\n\n## Architecture\n\nThe current architecture of the project goes as follow:\n\n- html =\u003e Pages of the devtools\n- lib =\u003e All of the extension code, excluding html pages, and packages\n    - background =\u003e All of the background pages of the DevTools. Background page acts as a bridge between background tasks and the content scripts\n    - content =\u003e [Content scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)\n    - crawler =\u003e All of the code injected onto the inspected page to query elements and act upon events\n    - elements =\u003e All of the custom elements used by the DevTools\n    - types =\u003e Typings and Enums\n    - util =\u003e Utility functions\n\n- context-menus.js =\u003e Context menu actions and communication\n- devtools.js =\u003e Panel and general initialization actions. Lifecycle callbacks\n\n- Packages =\u003e Separate tools used for WCDT, maybe later on built into their own tools\n    - Nydus =\u003e Message passing and management between layers\n    - Analyzer =\u003e [Custom Elements Manifest analyzer](https://github.com/open-wc/custom-elements-manifest/tree/master/packages/analyzer) integration\n    - Playground =\u003e [Playground Elements](https://github.com/google/playground-elements) integration with source view and console view \n\n\n## Local Development\n\nRequired tools:\n\n- NPM (any up to date version should do)\n- A preferably up to date version of Chrome/Edge/Firefox\n- A zipping tool (when working with firefox).\n- Any OS (windows/mac/linux)\n\n---\n\nIf you want to develop or use the devtools locally, you can do so by following these steps:\n\n1. Clone this repository\n2. Run `npm install`\n3. run `npm run build`\n4. Go to Chrome Extensions\n5. Enable Developer mode\n6. Choose \"Load Unpacked\"\n7. Select the generated `dist` -directory in the project folder\n\n### Firefox\n\nFor firefox, you might need to create a zip of the `dist`-folder to ad it to firefox as an extension.\n\nFeel free to use whatever zip tool you want to zip the `dist`-folder.\n\n## Generating a full package\n\nThere is a combination script called `npm run package` which builds the project, and packages it utilizing the `zip` command line tool for linux.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Fweb-component-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatsuuu%2Fweb-component-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuuu%2Fweb-component-devtools/lists"}