stencil-inspector icon indicating copy to clipboard operation
stencil-inspector copied to clipboard

Stencil Inspector

Built With Stencil

A minimal Chrome extension for debugging web components built with Stencil.

Compatibility: Stencil 0.7.0 and up

Provided inspections:

Props
  • Type
  • Mutable
  • Connect
  • Context
  • Watchers
  • Value (including edit for string, number and boolean props)
States
  • Watchers
  • Value (including edit for string, number and boolean values)
Elements
Methods
Events
    Emitters
    • Definition
    • Flags
      • Bubbles
      • Cancelable
      • Composed
    Listeners
    • Definition
    • Flags
      • Capture
      • Disabled
      • Passive
Lifecycle methods
Internal class members

Instructions

  1. Clone the repo
  2. Build the project using npm run build
  3. Load unpacked extension in Chrome
  4. Point to the www folder

Screenshots

Screenshot 1 Screenshot 2 Screenshot 3

Credits