Nutritious Potato Munchies

    web-components-inspector

    0.0.2 • Public • Published

    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!

    Overview

    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 🔭

    Cross-browser usage

    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 🔭

    Chrome extension usage

    Keywords

    none

    Install

    npm i web-components-inspector

    DownloadsWeekly Downloads

    2

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • bashmish