Web Components Inspector (supports Polymer)
This tool gets inspiration from existing tools like component-inspector and similar ones for Vue (vue-devtools), React (react-devtools), Angular (augury), etc... For now it is more a PoC that such a tool can be developed for Custom Elements and ShadowDOM (and friends) to provide a tree of Web Components with the ability to navigate between nodes. UX needs to be improved a lot, lots of features are still to be done, but in certain cases you can play and benefit from it right now. Stay tuned!
Usage
Cross-browser
-
Install CLI:
npm install -g web-components-inspector -
In terminal run CLI in you project root to start the server:
cd path/to/my/projectwci # run server on a default port 9247wci -e code # with open-in-editor feature (VSCode)wci --help # look at all available options -
Create "WCI" bookmarklet in your browser:
javascript: {var s = document;ssrc = 'http://127.0.0.1:9247/publisher.js';s {s;var m = document;mname = 'wci:inpage-host';documenthead;};documenthead;}; -
Open page with Web Components (for example Shop app) and click on the bookmarklet to load and activate the inspector.
-
Start inspecting 🔭
Chrome Extension
-
Install Rempl extension, a platform that will host Web Components Inspector in the Chrome DevTools panel. For more information about it visit Rempl GitHub repository.
-
Install Web Components Inspector extension.
-
Open page with Web Components (for example Shop app) and activate DevTools => Rempl panel.
-
To activate open-in-editor feature, you still need to run a server. You can either use the CLI (see cross-browser usage, steps 1-2), or use a server specifically created for this feature (on port 9247 which the extension expects):
npm install -g open-in-editor-servercd path/to/my/projectopen-in-editor-serve -e code -p 9247 # run server on a port 9247 and open files in VSCodeopen-in-editor-serve --help # look at all available options -
Start inspecting 🔭