web-components-inspector

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

1. Install CLI:

   npm install -g web-components-inspector

2. In terminal run CLI in you project root to start the server:

   cd path/to/my/project
   wci         # run server on a default port 9247 
   wci -e code # with open-in-editor feature (VSCode) 
   wci --help  # look at all available options 

3. Create "WCI" bookmarklet in your browser:

   javascript:(function() {
     var s = document.createElement('script');
     s.src = 'http://127.0.0.1:9247/publisher.js';
     s.onload = function() {
       s.remove();
       var m = document.createElement('meta');
       m.name = 'wci:inpage-host';
       document.head.appendChild(m);
     };
     document.head.appendChild(s);
   })();

4. Open page with Web Components (for example Shop app) and click on the bookmarklet to load and activate the inspector.

5. Start inspecting 🔭

Chrome Extension

1. 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.

2. Install Web Components Inspector extension.

3. Open page with Web Components (for example Shop app) and activate DevTools => Rempl panel.

4. 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-server
   cd path/to/my/project
   open-in-editor-serve -e code -p 9247 # run server on a port 9247 and open files in VSCode 
   open-in-editor-serve --help  # look at all available options 

5. Start inspecting 🔭